Having a problem using @apollo/client with GraphQL API

Solved
Highlighted
Tourist
5 1 1

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 {
        cursor
        node {
          id
          title
        }
      }
    }
  }
`;

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}>
        <AppBridgeProvider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <RoutePropagator />
          <ApolloProvider client={client}>
            <Component {...pageProps} />
          </ApolloProvider>
        </AppBridgeProvider>
      </AppProvider>
    );
  }
}

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

 

0 Likes
Highlighted
Tourist
5 1 1

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(),
});