Duplicate active queries in Apollo Client Devtools

Question

I’m using React with Apollo Client 3 and Hasura as a GraphQL server.

The component ProductList use the get_products query once. Then two exact copies of this query are memorized in the Apollo Cache as shown in the Apollo DevTools.

My question is - Why two identical queries get generated in the cache instead of one?

Apollo DevTools results

My code

import {
  ApolloClient,
  ApolloProvider,
  InMemoryCache,
  HttpLink,
  gql,
  useQuery,
} from "@apollo/client";

const client = new ApolloClient({
  link: new HttpLink({
    uri: "http://localhost:8080/v1/graphql",
  }),
  cache: new InMemoryCache(),
});

function App() {
  return (
    <div className="App">
      <ApolloProvider client={client}>
        <ProductList />
      </ApolloProvider>
    </div>
  );
}

const ProductList = () => {
  const GET_PRODUCTS = gql`
    query get_products {
      product {
        id
        name
        __typename
      }
    }
  `;

  const { loading, error, data } = useQuery(GET_PRODUCTS);
  if (loading) return <p>Loading ...</p>;
  if (error) return <p> {error.message}</p>;
  return (
    <>
      <h1>ProductList</h1>
      <ul>
        {data?.product.map((product: any) => {
          return <li key={product.id}>{product.name}</li>;
        })}
      </ul>
    </>
  );
};

export default App;

score 4 · Accepted Answer · answered Feb 28 '22 at 17:33

This is basically a duplicate of Apollo Client what are active queries?

The main concept is that Active Queries represents the queries that are running inside of mounted components in your React application. It doesn't mean that the data is cached twice, it means that there are two places in your application that rely on the results of this query.

If the results of the query in cache are updated both places will automatically get the data updates.

Duplicate active queries in Apollo Client Devtools

1 Answers1