Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
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.
Solved! Go to the solution
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
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
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
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)
}
}
});