Having a problem using @apollo/client with GraphQL API

[omsharp]

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!

[omsharp · 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]

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

[cdedreuille]

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]

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]

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