Apollo Graphql запрашивает повторную визуализацию компонентов, несмотря на то, что Stati c HTML сгенерировано из React Stati c - Ошибка Graphql «Инвариантное нарушение» - PullRequest
Новая
       47

Apollo Graphql запрашивает повторную визуализацию компонентов, несмотря на то, что Stati c HTML сгенерировано из React Stati c - Ошибка Graphql «Инвариантное нарушение»

0 голосов
/ 28 января 2020

Live Demo: Refre sh Эта страница (Существует отдельная проблема, когда classNames неправильно применяются при refre sh, но я сделал отдельную проблему для этого здесь .

На вкладке Сеть вы можете видеть, что запрос POST выполняется на https://backend.fastestfollowup.com/graphql/.

Наконец, состояние c HTML собрана правильно и уже имеет предварительно отрисованный HTML. Вот ссылка Code Sandbox . Если вы проверите build / blog / why-your ... / index. html вы увидите HTML.

Попытки решения

Насколько я понимаю, исходное состояние должно быть установлено в предварительно загруженное состояние, как определено в Github Issue .

Однако в компонентах / blog / BlogPage. js Я добавляю эти строки кода 

// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__APOLLO_STORE__;

// Allow the passed state to be garbage-collected
delete window.__APOLLO_STORE__;

const client = new ApolloClient({
  initialState: preloadedState,
});

// Tell react-snap how to save state
window.snapSaveState = () => ({
  __APOLLO_STORE__: client.readQuery({
    GET_BLOG, // you can pass any query you want to prerender here
  }),
});

Мой файл отличается от "zomars", так как мой запрос находится в компоненте и куда он кладет: 

loadComponents()
  .then(() => hydrate(AppWithRouter, rootElement))
  .catch(() => render(AppWithRouter, rootElement));

Я кладу: 

if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}

И когда я запускаю 

NPM Run Build

, я получаю трассировку стека с: 

error at / Error: Evaluation failed: Invariant Violation: Invariant Violation: 8 (see https://github.com/apollographql/invariant-packages)
    at new t (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:14677)
    at u (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:14936)
    at _ (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:7884)
    at U (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:11581)
    at t.transformDocument (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:47068)
    at t.read (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:45221)
    at t.e.readQuery (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:25185)
    at t.e.readQuery (http://localhost:45678/static/js/2.d49c31f0.chunk.js:2:107159)
    at window.snapSaveState (http://localhost:45678/static/js/main.7f2c7838.chunk.js:1:7940)
    at __puppeteer_evaluation_script__:30:27
    at ExecutionContext._evaluateInternal (C:\programming-projects\React\Practice Projects\fastest-follow-up-home\node_modules\puppeteer\lib\ExecutionContext.js:122:13)
...
...

Так ч Вот мои вопросы:

  1. Собираюсь ли я решить мою проблему правильным образом? Я не хочу повторно получать данные graphql.

  2. Если я поступаю правильно, что создает инвариантную оценку? Как примечание, точный код для этого в этой песочнице в src / components / blog / BlogPage. js

...