Having a problem using @apollo/client with GraphQL API

5 1 6

I'm using @Apollo/client to handle GraphQL in my app.

When I use useQuery hook, all I get is loading == true, and it never changes to false, and data is always undefined. With no errors!



import { gql, useQuery } from '@apollo/client';

const GET_PRODUCTS = gql`
  query getProducts($first: Int!) {
    products(first: $first) {
      edges {
        node {

const ProductsList = () => {
  const { data, loading, error, networkStatus } = useQuery(GET_PRODUCTS, {
    variables: { first: 10 },

  console.log('networkStatus', networkStatus);
  console.log('loading', loading);
  console.log('error', error);
  console.log('data', data);



The client is setup in my _app file


import App from 'next/app';
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import { AppProvider } from '@shopify/polaris';
import { Provider as AppBridgeProvider } from '@shopify/app-bridge-react';
import Cookies from 'js-cookie';
import '@shopify/polaris/dist/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import RoutePropagator from '../components/RoutePropagator';

const client = new ApolloClient({
  credentials: 'include',
  cache: new InMemoryCache(),

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const shopOrigin = Cookies.get('shopOrigin');
    return (
      <AppProvider i18n={translations}>
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          <RoutePropagator />
          <ApolloProvider client={client}>
            <Component {...pageProps} />

export default MyApp;



I only get two rounds of response to the query where loading is always true, and data is undefined.

Here is the console output of the code above, nothing else!

Screenshot 2020-10-18 163630.png


5 1 6

This is an accepted solution.

Thanks to someone out of this forum, the issue is solved.

Solved by using link object in the client instantiation, like this:

import {  ApolloClient,  InMemoryCache,  createHttpLink,} from '@apollo/client';

const client = new ApolloClient({
  link: new createHttpLink({
    credentials: 'include',
    headers: {
      'Content-Type': 'application/graphql',
  cache: new InMemoryCache(),


New Member
1 0 1

Mate! If we ever meet, beer's on me.

New Member
1 0 1

Oh! Beers on me too. It's weird that Shopify is still using the old version of Apollo when you start with the CLI. Took me a while just to get started.