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 #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 apollo-client@2.6.4 and next@9.1.4.

[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 #3536, more specifically because of commit b049ee2. 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/client@3.0.0-beta.32 + @apollo/react-ssr@4.0.0-beta.1 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",

[EyMaddis]

Something very similar happens with errors in getDataFromTree:
#1403 (comment)

[278kunal]

Hopefully, @wesbos solution worked. Upgrading to "@apollo/react-hooks": "^4.0.0-beta.1" did solve the issue.

[qburnsFB]

Hope this helps someone else.

Noticed the SSR issue in our app yesterday, viewing page source confirming it wasn't properly server rendering.

Tried all the combinations of fixes that I could, none were working, including upgrading simply to the new 4.0.0-beta.1 react-ssr package.

Then I randomly see this pull request merged about an hour ago as of writing:
apollographql/apollo-client#6221

I upgraded my @apollo/client to the latest "@apollo/client": "3.0.0-beta.46" and I can happily report my app is server rendering again.

Can't guarantee it will work for anyone else, but worth a shot.

[JClackett]

This still doesn't fix for me unfortunately, using:

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

I can see that when viewing page source i have all the required cache apollo state:

<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{},"apolloState":{"Platform:2333fea4-2b30-49ad-a28c-a453dc4cf820": ...

but there is no generated HTML using this state, any clues why this would be happening?

Something else i noticed is that when logging out the state in the returned WithApollo HOC:

  const WithApollo = ({apolloClient, apolloState, ...pageProps}) => {
    let client
	console.log(apolloState)
    if (apolloClient) {
      client = apolloClient
    } else {
      client = initApolloClient(apolloState, undefined)
    }

	return (
      <ApolloProvider client={client}>
		...

the console log prints quite a few times, but apolloState is undefined 3/4 times initially then it it is populated?

[eric-burel]

Beta 46 is unhappy with TypeScript so I couldn't test yet, but setting up a Next.js app with Apollo seems to lead to this issue. It behaves like getDataFromTree does nothing, apolloClient.cache.extract() returns an empty object for me.

[willianjusten]

Anything on this? I even clonned @wesbos repository and the SSR is not working actually. Nothing is broken but if you view source code, it just shows the Loading... state instead of the actual data.

I tried many different versions, with/without Typescript but I always ended not having SSR... The same codebase but using Apollo 2, is working fine.

[wesbos]

Yeah it's broken again for me, unsure if it's next-with-apollo, react-apollo, or something else down the line. Sort of just sitting on it and hoping it gets fixed because I don't think there is anything wrong with my code.

[JClackett]

Can also confirm that Apollo 2 works perfectly fine, have reverted for now

[mufasa71]

I found that if you don't check loading state it works as expected like:
ssr not working (i see loading in source)

if (loading) {
  return <div>Loading</div>
}
return <div>data?.user?.firstName</div>

ssr working (no loading check)

  return <div>data?.user?.firstName</div>

its weird that loading is true when rendering component, which breaks ssr

second, i don't know if it expected or not, but on client during pages transition, useQuery works without any ssr, like normal react hook, with loading state and missing data during fetching. I found workaround for this by using apollo client directly and call the same query in getInitialProps, so data is already cached, and useQuery works as expected on client side... probably this workaround may fix issue above (with loading state) but its weird to duplicate code, and call the same query twice

[wesbos]

Yeah I've run into situations where loading is true, but the data is also there. I think that is the core of this issue

[EddyVinck]

Any updates on this?

I tried the code in the NextJS with-apollo example but no luck. I thought my database connection was just not there at first and I've wasted so much time on this before finding this thread 🙈

Even returning static data in my resolver doesn't result in SSR working, so it seems the problem really is getDataFromTree

@wesbos do you still have this problem?

[EyMaddis]

I personally switched to avoiding getDataFromTree completely and manually loading the SSR data within getInitialProps to warm the apollo cache.
This is also a rather significant performance improvement because you only render your app once, not > 2 times as with getDataFromTree!

I also used a custom useQuery which forces ssr: false for the server to avoid any requests from firing on the server.
I am then blocking the import for useQuery via the tslint/eslint:

"import-blacklist": {
      "severity": "error",
      "options": [
        {
          "@apollo/client": ["useQuery"]
        },
....

My custom useQuery.tsx looks like this:

// tslint:disable-next-line:import-blacklist
import {
  DocumentNode,
  OperationVariables,
  QueryHookOptions,
  QueryResult,
  useQuery as useApolloQuery,
} from '@apollo/client'

export function useQuery<TData = any, TVariables = OperationVariables>(
  query: DocumentNode,
  options: QueryHookOptions<TData, TVariables> = {}
): QueryResult<TData, TVariables> {
  const opt = process.browser
    ? options
    : {
        ssr: false, // we no longer use the ssr from apollo!
        ...options,
      }
  return useApolloQuery<TData, TVariables>(query, opt)
}