Apollo-client: [3.0] renderToStringWithData resolves before http-queries in tree are resolved

Created on 15 Jan 2020 · 4Comments · Source: apollographql/apollo-client

I am using renderToStringWithData in an SSR setup and the returned promise resolves too early. Here is a complete simple example using a wp-graphql server as endpoint:

import React from 'react'
import fetch from 'node-fetch'
import express from 'express'
import {
  ApolloProvider,
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  gql,
  useQuery
} from '@apollo/client'
import { renderToStringWithData } from '@apollo/react-ssr'

const PORT = process.env.PORT || 3000

const app = express()

app.use((req, res) => {
  const client = new ApolloClient({
    link: createHttpLink({
      uri: 'http://api-url/graphql',
      fetch
    }),
    cache: new InMemoryCache(),
    ssrMode: true
  })

  const App = () => {
    const { data, loading, error } = useQuery(gql`
      query {
        pageBy(uri: "front") {
          title
        }
      }
    `)

    if (error) return <h1>Error</h1>

    if (loading) return <h1>Loading</h1>

    return <h1>We have data: {JSON.stringify(data)}</h1>
  }

  const ServerApp = (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  )

  renderToStringWithData(ServerApp).then(markup => {
    const apolloState = client.extract()

    console.log('Apollo state', apolloState)

    res.send(markup)
  })
})

app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}!`)
})

Intended outcome:
The promise returned by renderToStringWithData should not resolve until the query defined in the App component is resolved so the rendered output would be "We have data ...".

Actual outcome:
The promise returned by renderToStringWithData is resolved before the query is resolved, resulting in "Loading" as the rendered output.

How to reproduce the issue:
Run the above example against a working graphql endpoint in a babel-node environment.

Version

System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
  Binaries:
    Node: 12.14.0 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  npmPackages:
    @apollo/client: ^3.0.0-beta.22 => 3.0.0-beta.22 
    @apollo/react-components: ^3.2.0-beta.0 => 3.2.0-beta.0 
    @apollo/react-ssr: ^3.1.3 => 3.1.3 
    apollo-cache-inmemory: ^1.6.5 => 1.6.5 
    apollo-client: ^2.6.4 => 2.6.8 
    apollo-link: ^1.2.13 => 1.2.13 
    apollo-link-error: ^1.1.12 => 1.1.12 
    apollo-link-http: ^1.5.16 => 1.5.16 
    apollo-link-state: ^0.4.2 => 0.4.2 
    apollo-utilities: ^1.3.2 => 1.3.3

✔ confirmed 🛬 fixed-in-prerelease

Source

andersthorborg

😕1

Most helpful comment

@hwillson It works like a charm! Thank you so much. 👌

andersthorborg on 17 Jan 2020

👍2

All 4 comments

Thanks for reporting this @andersthorborg. There is a new @apollo/react-ssr beta that addresses this issue (see https://github.com/apollographql/react-apollo/pull/3536). That beta is a bit out of date though based on recent @apollo/client changes we've made, so I'll be working on prepping a new @apollo/react-ssr beta shortly. I should have it ready later today.