bug: useQuery with a fetch policy of standby causes SSR to hang

[simplecommerce]

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/[email protected] 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

[dchenk]

I can confirm I am encountering the same bug: I had one place in the code where I was using useLazyQuery and the SSR would never complete, but when I commented out the useLazyQuery call it started working. This started happening after I upgraded from version 3.4.16 to 3.5.2. I'm rendering a React app on the server using Vite with frandiox/vite-ssr.

The same bug occurs on version Apollo Client version 3.5.5.

[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.

[avlaguta]

I am also experiencing the same issues using the useLazyQuery on our SSR pages.

v3.4.8 works well.

[YannickDa]

Same for me.

v3.4.17 everything works
v3.5.0 useLazyQuery has issues with our SSR pages.

[chemicalkosek]

I can confirm the same issue
When there's a useLazyQuery on page, it hangs during SSR.
All 3.5 versions affected up to 3.5.6. Returning to 3.4.17 makes it work again.

[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 (43883b3): all of them have the same behavior mentioned above.

[atarek12]

I have a PR that should solve this issue, but there is a possible workaround by setting ssr: false in the query options

[byronlanehill]

I am using the latest versions and am seeing the same issue with the custom NextJS app that implements isomorphic rendering. Setting ssr: false fixes the issue, but there is no warning or anything in the console on the server and it doesn't hang on client-side routing, just on full page loads of a page that uses useLazyQuery which took a few days to figure out.

@atarek12 can you link me to your PR?

[atarek12]

@byronlanehill you can find the PR here
It has been for 6 months there and no responses from the team yet. It is a very annoying bug and very very hard to catch it.
Indeed, the current version of apollo-client(3.6.5) fixes a part of the issue, so you don't need to pass ssr: false option while using useLazyQuery anymore. but the same bug still exists while using {fetchPolicy: 'standby'}.

[simplecommerce]

@atarek12 @byronlanehill I just tried 3.6.6 (latest) on my repo and it seems to work fine, so whatever problem I had with the prior release 3.5.4 (i hadn't checked for a while) is gone on my end, it could be another issue but still be related to this one I assume.

[hwillson]

The original issue should be fixed in @apollo/client@latest.

but the same bug still exists while using {fetchPolicy: 'standby'}

@atarek12 Can you further explain the issue you're seeing with standby?

[atarek12]

@hwillson The app is freezing and does not compile while using the standby option in SSR mode with useQuery
This pr offered a simple fix to this case to let the query resolve and didn't stuck again.

Here is the failing test for it

it('should skip SSR tree rendering if `fetchPolicy` option is `standby`', () => {
    const link = mockSingleLink({
      request: { query: CAR_QUERY },
      result: { data: CAR_RESULT_DATA }
    });

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

    let renderCount = 0;
    const Component = () => {
      const { data, loading } = useQuery(CAR_QUERY, { fetchPolicy:'standby' }); 
	renderCount += 1;
	if (!loading && data) {
        const { make } = data.cars[0];
        return <div>{make}</div>;
      }
      return null;
    };

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

    return renderToStringWithData(app).then(result => {
      expect(renderCount).toBe(1);
	expect(result).toEqual('');
    });
  });

[simplecommerce]

@hwillson @atarek12 I can confirm that useQuery not useLazyQuery, hangs when fetchPolicy is set to standby with 3.6.5 or 3.6.6, I did the test with my test repo.

[hwillson]

Thanks @atarek12 @simplecommerce - can one of you share your reproduction that shows this problem with standby? We need to be careful when it comes to adding more SSR based conditional logic, like PR #9382 is proposing. What appears to be a simple change can have ripple effect implications, so starting with a reproduction will help us validate things. Thanks!

[simplecommerce]

@hwillson I created a separate branch demonstrating the bug in my original repo here:

https://github.com/simplecommerce/meteor-graphql-app/tree/bug-usequery-fetchpolicy-standby

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

The page won't load.

If you go in this file: /imports/ui/Info.jsx and uncomment the fetchPolicy, it will load fine.

[hwillson]

Not gonna lie, I love reproductions that use Meteor. 🎉 We'll take a look - thanks!

[atarek12]

@hwillson here is my reproduction case, clone this repo and run yarn and yarn dev

[alessbell]

Updated the title to reflect the fact that useLazyQuery no longer has this issue, but useQuery + a fetch policy of standby does as others have noted (just reproduced with 3.7.13).