Apollo GraphQL client not receiving data

Solved
Highlighted
Tourist
6 1 1

Greetings -  I am building a custom shop and I have been trying to add the Apollo client to a Gatsby Js app to allow for dynamic queries of the Shopify data - Gatsby has its own static query method to reach Shopify that does not allow for runtime query.  I have installed the Apollo client and I am using the access tokens from the store in the headers.  I am receiving a 200 OK response to the apollo query but no actual data.  The loading response to useQuery hook is false, data response is undefined. Error is Error parsing line 1 of JSON data.  I have read this is due to receiving an html response instead of JSON.  However, I have tried using application/graphql and application/json as 'Content-Type' in the headers and still received the same response. Also, when I try the query in Shopify GraphiQL I receive a data response so the graphql query seems to be ok.

Here is the code for the Apollo client in gatsby-browser:

 

import React from 'react'
import fetch from 'isomorphic-fetch'
import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache } from '@apollo/client'

const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: `${process.env.GATSBY_SHOP_NAME2}.myshopify.com/api/2020-10/graphql`,
    headers: {
      'X-Shopify-Storefront-Access-Token':
        process.env.GATSBY_SHOPIFY_ACCESS_TOKEN2,
        'Content-Type' : 'application/graphql',
         
    },
    fetch,
  }),
})

const wrapRootElement = ({ element }) => (
  <ApolloProvider client={apolloClient}>{element}</ApolloProvider>
)

export { wrapRootElement }

 

 

I believe it will be something simple but after time, I can't figure out what it is. Your help is greatly appreciated.  Thank you

Highlighted
Explorer
37 4 8

I had same issue in the past. I will suggest :-

1.  Graphiql can be great tool to check if the query actually returns data. 

2. From your Shopify admin, make sure your token has right permissions and if you are trying to access products/collections, verify that they are available to the private app(where you get the token).

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on simranjeetsingh6076@gmail.com

Highlighted
Tourist
6 1 1

Thanks @Simranjeet !  I did check Graphiql and the query does produce data.  I will double check the permissions but wouldn't it send a 403 forbidden if it were permissions?  I am receiving a 200 OK response.  I will make sure read and write for products are included.  Thank you for your suggestions.

0 Likes
Highlighted
Explorer
37 4 8

You are welcome, @honeycomb7. You are right, it supposed to be 403, but It has been a while and I can't recall exactly.

Just to clarify that, I meant. Please go to Shopify Admin > Products > All Products > Select all products(from top checkbox) > More Actions > Add Available Channel(s) > Make sure your private app is checked there.

Thank You

Highlighted
Tourist
6 1 1

Thank you @Simranjeet , I did make all products available to the app in Shopify Admin but unfortunately this did not solve the problem.  Also I should say, the static query was producing data - I think it uses a different version of the API.  It is only the Apollo client that is not producing anything.  Do you know if I needed to use OAuth credentials for Apollo Client?  Many of the examples I see with Apollo Client use 'with credentials'.  I am using the regular private app access token and shop name.  It is labeled as a custom app.

0 Likes
Highlighted
Explorer
37 4 8

I think you don't require OAuth to use storefront API if you are not building an embedded app.

Highlighted
Tourist
6 1 1

Thanks @Simranjeet . I figured out part of my problem, I didn't put https:// in front of my shop name.  Now that it is straightened out I see the real error which is a CORS error.  I am getting a 415 error.

I don't see clear documentation of what is required to be in the headers.  I feel like I have been gathering info piecemeal from different sources.  Things which I feel should be readily provided, I am hunting around for.  If you have a sample of code accessing Shopifys graphql API from Apollo Client using React that I can review I would greatly appreciate it. The problem I have been seeing with the sample Shopify app repos is that they are outdated, where the API or dependencies have changed.  Many thanks

0 Likes
Highlighted
Explorer
37 4 8

Please find the source code here.

Thank you & Good Luck !!!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on simranjeetsingh6076@gmail.com

Highlighted
Tourist
6 1 1

Thank you for the code sample, I appreciate it.

0 Likes
Highlighted
Tourist
6 1 1

This is an accepted solution.

Here is how I was able to get the data from the Apollo Client Version 3.0  using React in Gatsby Js to make dynamic queries via graphql to Shopify's Storefront API, this is in the gatsby-browser and gatsby-ssr file:

 

import React from 'react'
import fetch from 'isomorphic-fetch'
import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client'


const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: new createHttpLink({
    uri: `https://${process.env.GATSBY_SHOP_NAME2}.myshopify.com/api/2020-07/graphql.json`,
    headers: {
      'X-Shopify-Storefront-Access-Token':
        process.env.GATSBY_SHOPIFY_ACCESS_TOKEN2,
      'Accept' : 'application/graphql'
    },
    fetch,
  }),
})

const wrapRootElement = ({ element }) => (
  <ApolloProvider client={apolloClient}>{element}</ApolloProvider>
)

export { wrapRootElement }

 

  I used the uri with .json at the end, and added the "Accept" tag at the header, and finally the actual uri string included https:// at the beginning.   With this code I was able to receive data from the query.  Thanks again for your help @Simranjeet. I hope this is helpful to someone.  If anyone has suggestions or comments I am open.

0 Likes