使用 react-apollo 进行服务器端渲染

Question

最好的祝愿，当我使用本地瑜伽服务器和本地 docker 容器作为数据库时，一切工作非常顺利，因为数据是在瞬间加载的，因此......如果有人登录，则亲自签名的人也会立即出现在客户端和服务器端。

现在我在远程服务器上部署了前端、后端和数据库，加载数据需要时间。因此，即使我们已经登录，Sign In 按钮也会停留 3-4 秒。然后前端意识到我们已登录，然后显示我们的名字。

这是因为我们只有在获取数据后才渲染数据。但是当数据迟到时，服务器端代码就会过时。延迟更新客户端让网页应用感觉非常滞后。

我正在使用 Next.js

withData.js????

import withApollo from 'next-with-apollo'
import ApolloClient from 'apollo-boost'

function createClient({ headers }) {

  return new ApolloClient({
    uri: `${process.env.ENDPOINT}/graphql`,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: 'include',
        },
        headers
      })
    }
  })

}

export default withApollo(createClient);

User.js????

import { Query } from 'react-apollo'
import gql from 'graphql-tag'
import PropTypes from 'prop-types'
import { client } from '../lib/withData'

export const CURRENT_USER_QUERY = gql`
  query {
    me {
      id
      name
      fname
      lname
      email
      phone
      bio
      previledge
      gender
      username
      birthday
      profilePicture
      signUpMethod
    }
  }
`

const User = props => (
  <Query {...props} query={CURRENT_USER_QUERY}>
    {payload => {
      return props.children(payload)
    }}
  </Query>
)

export default User

SignInButton.js????

<User>
        {({data: {me}}) => (    

         { me ? <ProfileButton me={me} /> : <li style={{backgroundColor: '#ffffff', color: '#000000', borderRadius: '5px', padding: '5px 10px', zoom: '80%'}}><a href={`${meta.domain}/signin?intent=${this.props.router.asPath}`} style={{color: '#000000'}}>⚡️???? {this.signInText}</a></li> }

        )}
</User>

pages/_app.js????

import App, { Container } from 'next/app'
import { ApolloProvider } from 'react-apollo'

import withData from '../src/lib/withData'
import Page from '../src/components/Page'

class Wrapper extends App {

    static getInitialProps({Component, ctx}){

        let pageProps = {}
        if(Component.getInitialProps){
            pageProps = Component.getInitialProps(ctx)
        }

        // This exposes query to the user
        pageProps.query = ctx.query
        return { pageProps }

    }

    render() {
        const { Component, apollo, pageProps } = this.props
        return (
            <Container>
                <ApolloProvider client={apollo}>
                    <Page>
                        <div className="super_container"><Component {...pageProps} /></div>
                    </Page>
                </ApolloProvider>
            </Container>
        )
    }

}


export default withData(Wrapper)

如何在服务器端渲染来自 react-apollo 的数据？

---

找到了这些资源，但很难用我使用的堆栈实现。

https://bessey.dev/blog/2019/01/02/apollo-graphql-hypernova/

https://github.com/i18next/react-i18next/issues/593

https://shaleenjain.com/blog/nextjs-apollo-prefetch/

Answer 1

如果您希望通过查询进行 SSR，以便可以直接在服务器端填充 head 和其他内容，则需要直接在 您需要像这样在 GetInitialProps 函数中创建查询：

Page.getInitialProps = async ({
  apolloClient, query, children, router, href
}) => {
  const { data, error, loading } = await apolloClient.query({ query: LIVRE_QUERY, variables: { slug: query.titre } })
  if (error) {
    return <div>Erreur</div>
  }
  return { data, error, loading }
}