Having a problem using @apollo/client with GraphQL API

Retired Boards Appdev Tools
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 (
      
    );
  }
}

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
Screenshot 2020-10-18 163630.png1279×372 37.3 KB

2

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

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

4

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.

5

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

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