Solved

Having a problem using @apollo/client with GraphQL API

omsharp
Tourist
5 1 9

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

 

Accepted Solution (1)

omsharp
Tourist
5 1 9

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

 

View solution in original post

Replies 5 (5)

omsharp
Tourist
5 1 9

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
Visitor
1 0 2

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

cdedreuille
Visitor
1 0 2

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
Visitor
1 0 3

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

 

FrankLi
Tourist
11 2 1

Hey, i have same problem, do you include the graphql url in the ApolloClient?