Рендеринг на стороне сервера с реакцией-apollo - PullRequest
Новая
       61

Рендеринг на стороне сервера с реакцией-apollo

0 голосов
/ 15 мая 2019

С наилучшими пожеланиями, пока я использовал локальный сервер йоги и локальный докер-контейнер в качестве базы данных, все работало очень гладко, потому что данные загружались в доли секунды, и, таким образом ... если кто-то вошел в систему, имяподписанное лицо сразу же появилось на стороне клиента и сервера.

Теперь, когда я развернул веб-интерфейс, серверную часть и базу данных на удаленных серверах, загрузка данных занимает время.Из-за этого кнопка 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.js101 

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)

Как визуализировать данные в Reaction-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/

1 Ответ

1 голос
/ 15 мая 2019

Если вам нужен SSR по запросу, чтобы вы могли заполнить заголовок и другие данные прямо в serverSide, вам нужно сделать запрос напрямую в. Вам нужно создать запрос внутри функции 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 }
}
...