[BUG]: useLazyQuery + SSR hangs the rendering process with version 3.5.x

Intended outcome:

Render a component that contains a useLazyQuery hook.

Actual outcome:

The rendering process hangs even if the component is returned.

How to reproduce the issue:

Clone the following repo: https://github.com/simplecommerce/meteor-graphql-app

Make sure meteor is installed and execute meteor npm install and meteor run. It will run on port 3000.

Load the site, it should render with no issues. It runs on version 3.4.7 of @apollo/client.

Now stop the instance and execute meteor npm install @apollo/client@3.5.4 and run the instance again. Now try to load the site, it will hang and eventually time out.

If you go to https://github.com/simplecommerce/meteor-graphql-app/blob/master/imports/ui/Info.jsx and place a return "test"; before the useLazyQuery it will render, but if you place it after, it won’t.

I tried to console.log the variables, loading, error, etc, and they all seem ok at first glance, so something else seems to be causing it to time out or hang.

I also tried versions 3.5.0 up to 3.5.4 and the same issue occurs.

Versions

  System:
    OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
  Binaries:
    Node: 12.15.0 - ~/.nvm/versions/node/v12.15.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.15.0/bin/npm
  npmPackages:
    @apollo/client: ^3.5.4 => 3.5.4
    apollo-server: ^2.25.2 => 2.25.2

[redeyes2015]

I met this issue recently. However, it seems adding ssr: false in the options of useLazyQuery would mitigate this issue. Like: const [doQuery, { data }] = useLazyQuery(GQL_DOC, { ssr: false });

This is odd, since useLazyQuery should be skipped in SSR by nature. Could anyone check this?

Edit: v3.5.7 just released hours ago, and the situation still the same.

Edit2: I just found src/react/ssr/__tests__/useLazyQuery.test.tsx and this issue can be reproduced in test environment:

  it('should render', () => {
    const link = mockSingleLink({
      request: { query: CAR_QUERY },
      result: { data: CAR_RESULT_DATA }
    });

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

    const Component = () => {
      const [, { loading, called, data }] = useLazyQuery(CAR_QUERY); // this will cause render time out
      // const [, { loading, called, data }] = useLazyQuery(CAR_QUERY, { ssr: false }); // this will render

      expect(called).toEqual(false);
      expect(loading).toEqual(false);
      expect(data).toEqual(undefined);

      return null;
    };

    const app = (
      <ApolloProvider client={client}>
        <Component />
      </ApolloProvider>
    );

    return renderToStringWithData(app).then(markup => {
      console.log({ markup });
    });
  });

Edit 3: Checked v3.5.8, v3.6.0-beta.5, and main (43883b33e): all of them have the same behavior mentioned above.

[jclvicerra]

We are also experiencing the same issues using the useLazyQuery on our SSR pages.

When on Netlify, the SSR fails that uses useLazyQuery and would return error decoding lambda response: invalid status code returned from lambda: 0.

Downgrading to v3.4.17 seems to fix the issue.