Далее js: запрос на обновление не обновляется для данных, извлеченных в getInitialProps - PullRequest
Новая
       49

Далее js: запрос на обновление не обновляется для данных, извлеченных в getInitialProps

0 голосов
/ 25 апреля 2020

У меня есть компонент, который выглядит ниже 

class InitialPropsDetail extends React.Component<Props> {

  static getInitialProps = async (ctx: any) => {
    try {
      const { data, error, loading } = await ctx.apolloClient.query({
        query: GET_CURRENT_USER_QUERY,
      })
      const user = data.currentUser
      return { user, errors: error, loading }
    } catch (err) {
      return { errors: err.message }
    }
  }

  render() {
    const { user, error } = this.props
    if (error) {
      return (
        <Layout title={`Something went wrong...`}>
          <p>
            <span style={{ color: 'red' }}>Error:</span> {error}
          </p>
        </Layout>
      )
    }

    return (
      <Layout title={`${user ? user.name : ''} | Sav.to`}>
        {user && <UserDetail user={user} />}
      </Layout>
    )
  }
}

Я хочу, чтобы эта страница была SSR по причинам SEO. Поэтому я использую getInitialProps, чтобы отобразить его с некоторыми данными. Позже другое действие, которое обновляет некоторые из этих данных, и я выполняю Graphql refetchQuery для этого действия. Запрос запускается, и эти данные возвращаются. Однако представление не обновляется с новыми данными. Я попробовал то же самое в другом виде без getInitialProps, и он работает нормально.

Как обновить данные, полученные с помощью getInitialProps?

1 Ответ

1 голос
/ 26 апреля 2020

Из документов:

getInitialProps включает рендеринг на стороне сервера на странице и позволяет заполнить исходные данные , это означает отправку страницы с данными уже заполнены с сервера ... При начальной загрузке страницы getInitialProps будет работать только на сервере. getInitialProps будет затем запускаться на клиенте при переходе на другой маршрут через компонент next/link или с использованием next/router.

Как следует из его названия, getInitialProps запускается только один раз когда ваша страница загружена. Как правило, вы должны избегать использования ApolloClient, как это - вместо этого вы должны настроить его, как показано в официальных примерах . Таким образом, вы можете использовать хук useQuery как обычно вместо getInitialProps. Когда страница отображается на сервере, вы будете использовать getDataFromTree для увлажнения кеша на основе любых обработанных useQuery хуков.

...