Apollo Client 3: Browser becomes unresponsive when using useLazyQuery

[tusharkhatiwada]

I migrated the code to Apollo Client 3. At one point I've used useLazyQuery to fetch results. When a user selects an option from a dropdown field, the app fetches another data based on previous selection. It was working fine with previous version of Apollo Client.
Now, the browser becomes unresponsive right after I select an option from the dropdown.

Client configuration is simple.

Apollo 2:

import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

const httpLink = createHttpLink({
  uri: `${process.env.REACT_APP_SERVER_URL}`,
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

export default client;

Apollo 3:

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
  uri: `${process.env.REACT_APP_SERVER_URL}`,
  cache: new InMemoryCache(),
});

export default client;

useLazyQuery implementation looks like this:

const [loadCaseDetails, { loading: caseDetailsLoading }] = useLazyQuery(
    CASE_DETAILS,
    {
      onCompleted: (d) => {
        setGenes([...d.caseDetails.genes]);
        setMutations([...d.caseDetails.mutations]);
      },
    },
  );

Anyone having issue like this after migrating?

[maapteh]

why do you use setters, you can simply take the data which then updates the rest, no?

const [loadCaseDetails, { data: caseDetailsData, loading: caseDetailsLoading }] = useLazyQuery

since version 3 data becomes undefined when you change variables on the query, see #6603 and updates after getting the results

[tusharkhatiwada]

@maapteh Thanks. It solved the issue. I removed the onCompleted and instead used data directly.

[benjamn]

We're not quite ready to publish @apollo/client@3.1.0 yet, but I've published an @apollo/client@3.1.0-pre.0 release that includes #6588, which fixes some problems with onCompleted (and onError), if you want to try that in the meantime. 🙏