Having a problem using @apollo/client with GraphQL API

Solved
omsharp
Tourist
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 {
        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
omsharp
Tourist
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(),
});

 

milany
New Member
1 0 1

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

cdedreuille
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.

josefabel
New Member
1 0 0

What was wrong for me at the time of 05-05-2021 is:
It similar to above answer with small diff.

 

 

const client = new ApolloClient({    
    link: new createHttpLink({
      fetch: userLoggedInFetch(app),
      credentials: "include",
      headers: {
        "Content-Type": "application/graphql",
      },
    }),
    cache: new InMemoryCache(),
  });

 

0 Likes