SSR not waiting for queries to resolve

[klaaz0r]

When running @apollo/client on the server the queries are not resolved before rendering static.

When checking out getMarkupFromTree I noticed that the following code returns false:

    return renderPromises.hasPromises()
      ? renderPromises.consumeAndAwaitPromises().then(process)
      : html;

So non of the queries (using hooks) are ending up in renderPromises. Having hooked in apollo-logger I did notice that the queries after the request get resolved!

Intended outcome: Complete the queries correctly for server side rendering.

Version

    "@apollo/client": "^3.0.0-beta.6",
    "@apollo/react-ssr": "^3.1.3",

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v12.13.0/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 78.0.3904.97
    Safari: 13.0.3

[abroadwin]

Seeing the same problem here.

Downgrading @apollo/react-ssr to 3.1.2 seems to fix the issue.

[klaaz0r]

@abroadwin Doesn't seem todo the trick for me, looking at 3.1.2 nothing changed inside the getMarkupFromTree function.

[tvthatsme]

Not sure what kind of react project you are using, but we had something of a similar situation using Nextjs. Downgrading next from 9.1.2 to 9.1.1 fixed the issue.

[stolinski]

I'm on NextJS as well but downgrading next to 9.1.1 did not fix for me, nor did taking react-ssr to 3.1.2 Same issue as above.

[klaaz0r]

Also with 3.0.0-beta.7 The same problem happens

edit:

3.0.0-beta.9 has the same results

[theodoretliu]

I'm seeing the same issue! If I check on the server side, the hooks are returning loading: true and this causes the SSR to render the loading state, which defeats the purpose of SSR. Might this be related to https://github.com/apollographql/react-apollo/issues/3338 ?

[klaaz0r]

@theodoretliu yes seems like it. For now I just downgraded everything

[mattjennings]

downgrading @apollo/react-hooks and @apollo/react-ssr to 3.0.0 fixed it for me. Using [email protected] and [email protected].

[joaogarin]

Also noticing the same issue with 3.1.3 and 3.1.2, currently not able to update the package. worries me when there will be a security vulnerability and upgrading is necessary :/ for now 3.0.0 works..but kind of stuck there

[hwillson]

Would anyone here be able to provide a small runnable reproduction?

[theodoretliu]

https://github.com/theodoretliu/apollo-ssr-demo

Here's a repro

@hwillson

[hwillson]

Thanks for working on a reproduction @theodoretliu. Your reproduction uses the @apollo/client beta though, which unfortunately doesn't work with the current @apollo/react-ssr v3.1.3 package that you're using. The @apollo/client beta will only work properly with the @apollo/react-ssr package changes that are in PR https://github.com/apollographql/react-apollo/pull/3536, more specifically because of commit https://github.com/apollographql/react-apollo/pull/3536/commits/b049ee20052c23c69d608c592ab0e131e19fcb9e. If you're able to demonstrate the issue mentioned in this thread using the non-beta version of apollo-client, that would be super helpful. Thanks again!

[theodoretliu]

Okay, thank you @hwillson. Correcting the versions actually did resolve the issue... See the repo https://github.com/theodoretliu/apollo-ssr-demo for a working set of versions.

Still, I don't want to completely drop the issue because the documentation at the moment is very misleading. The combination of https://www.apollographql.com/docs/react/get-started/ and https://www.apollographql.com/docs/react/performance/server-side-rendering/ seem to indicate that the original combination I tried, where I installed the beta of @apollo/client should work perfectly fine together. The specific versions that are compatible are not indicated. I suspect a lot of people in this thread ran into issues also because of inconsistencies of versions, so is there a way that this could be clarified aggressively in the documentation?

I just feel like the documentation should never be in a state where following it all the way through would actually lead to incorrect behavior.

[fred8617]

i met the situation that when i use cra , i only do subscription in dev mode. after i build the app,then i use query to do ssr.then my backend server begin infinite loop( renderPromises.hasPromises() always be false). i found that has many same query because i use codegen.macro for the server query and the queryInfoTrie use the ast as key,so when the first query didn't resolve , the second time rehydrate begin and two ast was not the same object ,so it caused the infinite loop. gql-tag have a memory for the same template string but when i use ast directly or use codegen or gql-tag.macro it will cause the problem is there any way to solve this problem or mention something in documentation

[fred8617]

https://github.com/fred8617/apollo-ssr-loop a repo useRef to do ssr,and run normal in client

[wesbos]

Oof just wasted my afternoon on this. The 3.0 docs point to react-ssr working with 3.0. Following - hopefully this is resolved soon

[wesbos]

Looks like the PR was merged, so this should hopefully be fixed on the next release

[wesbos]

Looks like SSR is working again! You folks rock.

For anyone using getDataFromTree, make sure to update to "@apollo/react-ssr": "^4.0.0-beta.1",

[Linux249]

I am also fighting with this issue for some time now - with the latest updates I also could fix the issue. Here is the updated example with the code from next.js/with-apollo: https://github.com/Linux249/with-apollo-app but now I have the problem that the loading state is switching to loading in the end. I think that's related to usage/implementation here but cause I'm not sure and other people here mentioned that they use next.js I wanted at least share it here.

[albertfrates]

@Linux249 I am experiencing the same issue on our primary code base for our site. We are using NextJS, with Apollo. The SSR render is not waiting for queries to resolve, and we are returning loading state. Please let me know how I can help, I've been digging for two days.

[albertfrates]

Update: We use NextJS + Apollo. I've tried both the Query component and the useQuery hook. No dice, however I get the same results with each.

We are using the latest version of NextJS, using the "with-apollo" example located within the NextJS repository. Our queries are nested down into each component on the page, so we are using the NextJS AppTree in order to tell Apollo what data we need before the initial SSR Render. (Straight from the NextJS example). This works fine when I have one query, but the moment I add a second the first query breaks and only the second works.

So we can get only one query to return with data for SSR, but not more than one.

I'm not sure if this is an issue with the NextJS AppTree or Apollo, however we are desperate to find a solution as this is holding up a release for us.

You heard it here will buy the beer for whoever can help fix this!

[albertfrates]

@hwillson Are you still looking for a reproduction? I'd be happy to walk you through our issue if it helps.

[noeljackson]

In a very simple custom SSR setup we are having the same problem. Queries do not resolve and finish loading. Anyone have a functioning repository example for this behavior working properly? Or only reproductions of non working functionality?

@wesbos you said it’s working for you?

[JClackett]

I have it working in dev with @apollo/[email protected] + @apollo/[email protected] but my staging environment doesn't work, so hard to debug :(

[klaaz0r]

@noeljackson

I am using the following:

    "@apollo/react-hooks": "^3.1.3",
    "apollo-boost": "^0.4.4",2",
    "apollo-upload-client": "^12.1.0",
    "@apollo/react-ssr": "^3.1.3",

Everything seems to work with this for now, and you will need to update later on but at least you can continue :D

[noeljackson]

Still experiencing this issue with latest versions. Will build a reproduction that’s not next.js, unless someone has one to share.

[Edjevw12]

Updating to "@apollo/react-ssr": "^4.0.0-beta.1" didn't solve it for me.

I am using:

"@apollo/react-ssr": "^3.1.3",
"@apollo/react-hooks": "^3.1.3", 

[klaaz0r]

Updating to "@apollo/react-ssr": "^4.0.0-beta.1" didn't solve it for me.

I am using:

"@apollo/react-ssr": "^3.1.3",
"@apollo/react-hooks": "^3.1.3", 

Did you match up the mother dependencies as well? So everything too "^4.0.0-beta.1" ? they seem to be tightly coupled.

[Edjevw12]

Updating to "@apollo/react-ssr": "^4.0.0-beta.1" didn't solve it for me. I am using:

"@apollo/react-ssr": "^3.1.3",
"@apollo/react-hooks": "^3.1.3", 

Did you match up the mother dependencies as well? So everything too "^4.0.0-beta.1" ? they seem to be tightly coupled.

That solved it for me, big thanks!

[eugle]

更新"@apollo/react-ssr": "^4.0.0-beta.1"为我并没有解决。 我在用：

"@apollo/react-ssr": "^3.1.3",
"@apollo/react-hooks": "^3.1.3", 

你也匹配母亲的依赖吗？一切也一样"^4.0.0-beta.1"吗？他们似乎紧密相连。

为我解决了这个问题，非常感谢！

Updating to "@apollo/react-ssr": "^4.0.0-beta.1" didn't solve it for me. I am using:

"@apollo/react-ssr": "^3.1.3",
"@apollo/react-hooks": "^3.1.3", 

Did you match up the mother dependencies as well? So everything too "^4.0.0-beta.1" ? they seem to be tightly coupled.

That solved it for me, big thanks!

It's no use to me，I am using:

"@apollo/client": "^3.0.0-beta.38", "@apollo/react-hooks": "^4.0.0-beta.1", "@apollo/react-ssr": "^4.0.0-beta.1",