Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Storefront API client problems - access denied and/or headers.get is not a function

Solved

Storefront API client problems - access denied and/or headers.get is not a function

colinmcg
Shopify Partner
2 1 0

I'm trying to use the storefront API client to query metaobjects in our store. So far I have not been able to get a successful response from the Shopify GraphiQL app or from our client-side JS. But, when I test the request from Insomnia app it's successful.

 

From GraphiQL app - I get an ACCESS_DENIED error saying that scope needs to be turned on, but can see in my Headless storefront settings it is definitely on. Strangely I am able to successfully query shop or products, just not metaobjects. Also, the metobjects query does work via the Admin API

 

From JS - I have tried the @Shopify/storefront-api-client package (both as npm package & loading via CDN). Either way I get the following error response:

{message: '_t3.headers.get is not a function'}

We've also tried dropping the library and just using fetch, which results in a 403 response code. 

 

This has been stumping us for a couple days, if anyone has thoughts or ideas as to what could be going on I would really appreciate it.

 

Our last resort is to stand up our own server/endpoint and use the Admin API because we know that does work, but we'd like to avoid that and just use Storefront API directly from the browser.

 

 

 

 

Accepted Solution (1)

colinmcg
Shopify Partner
2 1 0

This is an accepted solution.

Just an update in case any is encountering this same issue - wasn't able to figure out why the Storefront client and native fetch was erroring, or the GraphiQL issue. But, was able to get a successful response using XMLHttpRequest 

View solution in original post

Replies 3 (3)

colinmcg
Shopify Partner
2 1 0

This is an accepted solution.

Just an update in case any is encountering this same issue - wasn't able to figure out why the Storefront client and native fetch was erroring, or the GraphiQL issue. But, was able to get a successful response using XMLHttpRequest 

jeremiah_rachio
Tourist
6 0 2

This should NOT be an accepted solution. You shouldn't have to opt for a custom fetcher in an API client unless you need to, not as a patch because a packages code doesn't compile properly.

For context, I'm running into a similar build issue with a Gatsby TypeScript except it's with the default graphql client: Error: GraphQL Client: t is not a function

jeremiah_rachio
Tourist
6 0 2

Wanted to come back and add my solution in hopes it might help some other Gatsby devs out there. Pertaining to Gatsby, since Gatsby has a build phase which runs in a node js runtime rather than browser runtime the Shopify storefront-api-client thinks the client is getting built server-side. Therefore, in order to fix the build issue you need to set the customFetchApi property in the storefront api client config to only run normal fetch requests if in a browser context. For example: 

 

export const storefrontAPIClient = createStorefrontApiClient({
  storeDomain: `your-store.myshopify.com`,
  apiVersion: '2024-04',
  publicAccessToken: 'access_token',
  customFetchApi: (url, init) => {
    if(typeof window !== undefined) {
      return fetch(url, init)
    } 
  }
});