React-apollo: useQuery does not run on the client when ssr=false

Created on 27 Aug 2019  ·  3Comments  ·  Source: apollographql/react-apollo

Intended outcome:

useQuery(query, { ssr: false }) runs on the client side on page load in an SSR application.

Actual outcome:

It is not being run. It seems it is hydrating with null and is therefore not firing the query on the client on load. This works using the <Query> component and there are no results for this query in the hydration data from the server.

How to reproduce the issue:

Haven’t created a repro yet. I can do that if you’re not able to surface the bug.

Version

System:
    OS: macOS 10.14.4
  Binaries:
    Node: 11.14.0 - /usr/local/bin/node
    Yarn: 1.16.0 - ~/code/monorepo/src/js/web/node_modules/.bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0
    Safari: 12.1
  npmPackages:
    @apollo/react-components: 3.0.1 => 3.0.1 
    @apollo/react-hooks: 3.0.1 => 3.0.1 
    @apollo/react-ssr: 3.0.1 => 3.0.1 
    apollo: 2.17.3 => 2.17.3 
    apollo-cache-inmemory: 1.6.2 => 1.6.2 
    apollo-client: 2.6.3 => 2.6.3 
    apollo-link: 1.2.12 => 1.2.12 
    apollo-link-error: 1.1.11 => 1.1.11 
    apollo-link-http: 1.5.15 => 1.5.15 
    apollo-link-rest: 0.7.3 => 0.7.3 

Most helpful comment

@hwillson I was able to reproduce the error using both <Query ssr={false}> component and useQuery(QUERY, {ssr: false}).

Packages versions:

@apollo/[email protected]
@apollo/[email protected]
@apollo/[email protected]
@apollo/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

All 3 comments

This should be fixed in React Apollo 3.1.0, but let us know if not. Thanks!

@hwillson I was able to reproduce the error using both <Query ssr={false}> component and useQuery(QUERY, {ssr: false}).

Packages versions:

@apollo/[email protected]
@apollo/[email protected]
@apollo/[email protected]
@apollo/[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

We're seeing this issue too, I've built a small reproduction and filed a new issue about it: https://github.com/apollographql/react-apollo/issues/4003

If you're facing this issue, please add a :+1: reaction to #4003

Was this page helpful?
0 / 5 - 0 ratings