CODEWITHSUNDEEP
reactjsgraphqlapolloapollo-clienthasura
Thomas Patenaude
Thomas Patenaude

Reputation: 111

Duplicate active queries in Apollo Client Devtools

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

enter image description here

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;

Upvotes: 5

Views: 1685

Answers (1)

Jesse Carter
Jesse Carter

Reputation: 21147

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.

Upvotes: 4

Related Questions