React Apollo Client, loading only change to true on first time query

Question

I have a simple structure of files on a same directory (./src/)

App.js

import React from "react";
import {
  ApolloClient,
  ApolloProvider,
  createHttpLink,
  InMemoryCache,
} from "@apollo/client";
import Gql from "./Gql";

const App = () => {
  const client = new ApolloClient({
    link: createHttpLink({
      uri: "https://api.spacex.land/graphql/",
    }),
    cache: new InMemoryCache(),
  });

  return (
    <ApolloProvider client={client}>
      <Gql />
    </ApolloProvider>
  );
};

export default App;

Gql.js

import React from "react";
import { gql, useLazyQuery } from "@apollo/client";

const Gql = () => {
  const [getQuery, { loading, data, error }] = useLazyQuery(gql`
    query {
      launchesPast(limit: 10) {
        mission_name
        launch_date_local
        launch_site {
          site_name_long
        }
      }
    }
  `);

  if (error) {
    return <div> Error . . .</div>;
  }

  return (
    <React.Fragment>
      <button
        style={{ padding: "20px" }}
        onClick={() => {
          getQuery();
        }}>
        Request Query
      </button>
      <div>Loading: {loading ? "true" : "false"}</div>
      <div>data: {JSON.stringify(data)}</div>
    </React.Fragment>
  );
};

export default Gql;

The loading variable changed to true and to false on first request. But if I try to query it again and again without reloading the page. The loading variable stay the same while the browser have a valid XHR Request to the graphql server.

after the first request, from the second request onwards it seems the data on the page is not being updated either, is that correct? by that I mean <div>data: {JSON.stringify(data)}</div> still shows data from the first request ? — Sangeet Agarwal
– Sangeet Agarwal, Commented Jan 15, 2022 at 14:33
Yes it will stay the same. I didn't change the parameter of graphql request, so it will return the same data. As you can see on the right side of the .gif, I called the request 4 times. You can try to see request yourself in this link: api.spacex.land/graphql — David Yappeter
– David Yappeter, Commented Jan 15, 2022 at 14:38
hm, try changing the parameter & see if it updates. This might be by design, so the useLazyQuery hook has no reason to update data since params did not change. — Sangeet Agarwal
– Sangeet Agarwal, Commented Jan 15, 2022 at 14:41
glad I could help, should I add this as an answer so it is helpful to other folks who might run into this same issue? — Sangeet Agarwal
– Sangeet Agarwal, Commented Jan 16, 2022 at 14:43

Sangeet Agarwal · Accepted Answer · 2022-01-16 14:55:25Z

2

This is by design, the useLazyQuery hook will only run when the params change as this will then prevent useless re-renders.

answered Jan 16, 2022 at 14:55

Sangeet Agarwal

1,83519 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Apollo Client, loading only change to true on first time query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related