React-apollo: ssr: false still sends request to server rendering serverside

[maapteh]

I saw the other issue about ssr (#3130). But that one was closed. Im using @apollo 3.1.0 and it seems the useQuery items with 'ssr: false' are still tried to call the backend. Im using the batched link package to sent all queries at once.

Intended outcome:

When i set ssr: false it should not try to call server when rendering the main part SSR. For ssr: true all works as expected.

Actual outcome:

Call is done twice. I curled the page to be sure no client side code is being executed. Then i see where ssr is set to false it's still being called.

How to reproduce the issue:

I have the following query:

    const { data, loading } = useGetProductQuery({
        variables: { id },
        ssr,
        context,
    });

For the parts where ssr is true everything works as expected (only being called once. For ssr false i see its been called twice.

When i now add 'skip: !ssr' i see the 'ssr: false' version are not being called. So that seems to be picked up correctly, but ssr not.

Version

    "@apollo/react-hooks": "3.1.1",
    "@apollo/react-ssr": "3.1.1",
    "@apollo/react-testing": "3.1.1",
    ...

    "apollo-cache-inmemory": "1.5.1",
    "apollo-client": "2.6.4",
    "apollo-link": "1.2.8",
    "apollo-link-batch-http": "1.2.8",
    "apollo-link-error": "1.1.7",
    "apollo-link-http": "1.5.11",
    "apollo-utilities": "1.3.2",
    "graphql": "14.1.1",
    "graphql-tag": "2.10.1",
    "next": "9.0.5",

[senorgeno]

@maapteh is it working for you? This is happening for me in Gatsby SSR as well. I have set ssr={false} but it would still fire off requests to the server. I ended up using the skip prop to prevent queries running during SSR.

[maapteh]

Hi @senorgeno its still happening but i thought its because i updated to NextJs 9 at the same time. So its difficult to know for me the reason why since the other ssr: false issue was closed and working for other people i thought it must be with NextJS since they do stuff in order to do things serverside or not...

I debugged a little further and the treewalker gives indeed only the result which has ssr: true (rendertostring) but as a side effect the others are called as well (not put in store for rehydration) and then client side again.

Skip is indeed working like it should but then i need to add another hook...

[maapteh]

I only have a reproduction with a private key for the api part... :( will try to make another

[maapteh]

@hwillson i found the issue in @apollo/react-hooks

  QueryData.prototype.startQuerySubscription = function () {
    var _this = this;
    if (this.currentObservable.subscription || this.getOptions().skip  || this.getOptions().ssr === false) return;
    var obsQuery = this.currentObservable.query;
    this.currentObservable.subscription = obsQuery.subscribe({

when i added || this.getOptions().ssr === false it was not executed to call when treewalking. And only executed it on the client side part.

[maapteh]

@senorgeno you will not need the hack anymore when the PR gets merged :)

[senorgeno]

@maapteh awesome! I hadn't dug deeper, but yeah I wouldn't have thought it to be NextJS if it was also not working in Gatsby as well.

[staylor]

this is a big problem for us at the NYT - can someone take a look?

[maapteh]

@staylor can you try the fix in #3515 and respond overthere too? I patched it now by overwriting the dist of react apollo in postinstall phase since no response came to my PR. Didn't want to use skip as hack...

[maapteh]

Ah i see you already did that, thanks @staylor ! And nyt is a nice implementation :)

[hwillson]

@maapteh @staylor and others; could you try the latest React Apollo beta (currently 3.1.2-beta.1) and let me know if that helps? If so I'll get it published as latest later today. Thanks!

[maapteh]

adding now, thank you for all your patience and puzzling stuff!

All is working correctly when i look at the actual load on the server. The ssr settings per component are now respected. No extra load. Superb!

index:
ssr: https://[snip]/catalog/v4/products/9200000111963040?offers=cheapest&includeAttributes=false&format=json
csr: https://[snip]/catalog/v4/products/9200000113944705?offers=cheapest&includeAttributes=false&format=json
csr: https://[snip]/catalog/v4/products/9200000113065845,9200000103388809?offers=cheapest&includeAttributes=false&format=json

debug:
csr: https://[snip]/catalog/v4/products/9200000113065845?offers=cheapest&includeAttributes=false&format=json

[maapteh]

@senorgeno if you can test with Gatsby that would be awesome. Else i will test it tomorrow with Gatsby so i have a reason to check this Gatsby out :)

[senorgeno]

@hwillson @maapteh Yeah that is working for me in Gatsby. Nice work!

Just to be sure I have the correct setup I have ssrMode on ApolloClient set to true during SSRing. I should also have ssr={false} on any Query (specifically those that would run on page load) as I didn't need to specify these in 2.1.x?

[maapteh]

in client:
ssrMode: typeof window === 'undefined', // Disables forceFetch on the server (so queries are only run once)

and indeed on component level you can set ssr arguments to false to exclude them from ssr. I think by default they were always ssr true.

[senorgeno]

Great. That is what I have, thanks!

On Thu, Oct 3, 2019 at 4:18 AM Mаартен - Maarten [e-mail]
wrote:

in client:
ssrMode: typeof window === 'undefined', // Disables forceFetch on the
server (so queries are only run once)

and indeed on component level you can set ssr arguments to false to
exclude them from ssr.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/apollographql/react-apollo/issues/3500?email_source=notifications&email_token=AAFR32E2YJ5CP2KVWYS6FC3QMS3UZA5CNFSM4IXFLKB2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAFEAGY#issuecomment-537542683,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFR32C3KAE4X2WF35URUT3QMS3UZANCNFSM4IXFLKBQ
.

--
Gene Dower
[email protected]

[colus001]

in 3.1.2, 3.1.3 Still having this issue. (3.1.1 is fine)

[rkrueger11]

I'm having the same issue on 3.1.5.

[denwakeup]

I'm having the same issue on 3.1.5.

It's work for me on 3.1.5. Just make sure you set up the Apollo client correctly.
Something like this:

new ApolloClient({
    ...,
    ssrMode: typeof window === "undefined",
});