Пустой кеш после серверной рендеринга запроса в изоморфном приложении с использованием Apollo GraphQL и React - PullRequest
Новая
       16

Пустой кеш после серверной рендеринга запроса в изоморфном приложении с использованием Apollo GraphQL и React

0 голосов
/ 04 июля 2018

У меня небольшая проблема с изоморфным js-приложением, и, возможно, вы можете мне помочь с этим. Я следовал этому уроку: https://www.apollographql.com/docs/react/features/server-side-rendering.html относительно SSR, и он в основном работает просто отлично. Первоначальный запрос отображается правильно, так что это нормально. Это кеш, который вызывает у меня головную боль ... Всякий раз, когда я вызываю client.extract(), он возвращает просто пустой объект, поэтому моя прекрасно отрендеренная страница перерисовывается, как только запускается код клиента, поскольку кеш пуст. На данный момент я совершенно не понимаю, почему это не работает. Я даже взглянул на пример Githunt, но рассматриваемый код в моем приложении практически одинаков, за исключением различий в версиях пакетов.

Стек, который я использую:

  • Композиция Docker с mongodb, graphql-сервером и изоморфным приложением
  • Раззл как основа для изоморфного приложения
  • Стилизованные компоненты

Версии пакета: 

"dependencies": {
    "apollo-cache-inmemory": "^1.2.5",
    "apollo-client": "^2.3.5",
    "apollo-link-http": "^1.5.4",
    "compression": "^1.7.2",
    "connect-mongo": "^2.0.1",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "isomorphic-fetch": "^2.2.1",
    "morgan": "^1.9.0",
    "razzle": "^2.2.0",
    "react": "^16.4.1",
    "react-apollo": "^2.1.8",
    "react-dom": "^16.4.1",
    "react-router-dom": "^4.3.1",
    "styled-components": "^3.3.3"
  }

Вещи, которые я пытался исправить:

  • Удалить стилизованные компоненты
  • Используйте getDataFromTree вместо renderToStringWithData
  • Удаление состава докера и его локальный запуск (Mac OS)
  • Измените версии пакета на версии в примере Githunt

Инициализация клиента на сервере: 

const client = new ApolloClient({
      ssrMode: true,
      link: createHttpLink({
        uri: 'http://server:5000/graphql',
        fetch: fetch,
        credentials: 'include',
        headers: {
          cookie: req.header('Cookie'),
          origin: 'frontend:5000'
        },
      }),
      cache: new InMemoryCache()
    });

На стороне клиента кеш работает просто отлично.

1 Ответ

0 голосов
/ 04 июля 2018

Хорошо, я нашел проблему. Ошибка состояла в том, что я инициализировал клиент Apollo на стороне клиента внутри моего компонента приложения вместо точки входа клиента (client.js в razzle). Итак, у меня была такая структура: 

<ApolloProvider client={client}>
  <StaticRouter context={context} location={req.url}>
    // <App>
    <ApolloProvider client={client}>
      ...
    </ApolloProvider>
    // </App>
  </StaticRouter>
</ApolloProvider>

Внутренний поставщик (на стороне клиента) перехватил запрос, поэтому поставщик на стороне сервера не сработал, что привело (конечно) к пустому кэшу на стороне сервера.

Я не знаю, единственный ли я наткнулся на эту проблему, но если нет, надеюсь, это поможет:)

...