AuthenticatedFetch does not resolve

hrstrand
Shopify Partner
9 1 4

I am experimenting with a JWT auth based solution with a Nodejs backend.

Auth works, and I can get authenticated GraphQL requests to work fine.

However, when I try to call my own rest-api using authenticatedFetch, the fetch operation does not resolve.
I've tracked it down to the getSessionToken() request is not resolving.

It seems that in a scenario where I do GraphQL requests (which use authenticatedFetch), my rest calls also work. I assume this is because the GraphQL request are somehow able to trigger that getSessionToken() resolved, and this causes the rest requests to also get the token.

So, my question is - is there some initialisation needed in order for getSessionToken() to work? 

Below code is how I try to setup app.ts

 

 const fetch2 = authenticatedFetch(app)
 const fetch = authenticatedFetch(app)
 
  const link = createHttpLink({
    credentials: "omit",
    fetch: fetch, // app: App Bridge instance
  });
  const client = new ApolloClient({
    link: link,
    cache: new InMemoryCache(),
  });
  pageProps = {... pageProps,app, fetch2}

  return (
    <AppProvider i18n={translations}>
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    </AppProvider>
  );

 

for one page, I do a GraphQL request (useQuery) and a rest request with fetch2 - this works : 

 

export default function Index(props:any, app:any)  {
  const { data } = useQuery(SHOP_DATA);
  const [state, dispatch] = useReducer(reducer, initialState);

  const [data2, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
     
      const result = props.fetch2(
        '/ticket',{method: 'POST'}
      )
        
      const res = await result;
      console.log("index res is",res)
    };
 
    fetchData();
  }, []);

 

If I remove the useQuery() line, the rest request does not work anymore.

 

These are my dependencies : 

  "dependencies": {
    "@apollo/client": "^3.3.7",
    "@babel/core": "^7.12.10",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.12.11",
    "@babel/register": "^7.6.2",
    "@koa/router": "^10.0.0",
    "@shopify/admin-graphql-api-utilities": "^0.2.0",
    "@shopify/app-bridge": "^1.29.0-alpha.5",
    "@shopify/app-bridge-utils": "^1.29.0-alpha.5",
    "@shopify/app-cli-node-generator-helper": "^1.2.1",
    "@shopify/dates": "^0.4.5",
    "@shopify/koa-shopify-webhooks": "^2.6.0",
    "@shopify/polaris": "^5.13.1",
    "@zeit/next-css": "^1.0.1",
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^7.0.2",
    "dotenv": "^8.2.0",
    "esm": "^3.2.25",
    "graphql": "^15.4.0",
    "isomorphic-fetch": "^3.0.0",
    "jsonwebtoken": "^8.5.1",
    "koa": "^2.13.1",
    "koa-session": "^6.1.0",
    "koa-shopify-auth-cookieless": "^1.0.31",
    "koa-shopify-graphql-proxy-cookieless": "^1.0.11",
    "next": "^10.0.5",
    "next-env": "^1.1.0",
    "node-fetch": "^2.6.1",
    "react": "^16.10.1",
    "react-dom": "^16.10.1",
    "react-scripts": "^4.0.1",
    "shopify-jwt-auth-verify": "^1.0.10",
    "uuid": "^8.3.2"
  }

 

 

 

 

0 Likes
hrstrand
Shopify Partner
9 1 4

thanks Greg - I've been through those already. 

Odd part in my case is that the rest requests via AuthenticatedFetch works if I also do a GraphQL request - so, somehow, the GraphQL request must be doing some sort of initialisation that I am missing

thanks,

Peter

0 Likes