Следующий SSR с Apollo useQuery зависит от другой проблемы useQuery - PullRequest
Новая
       22

Следующий SSR с Apollo useQuery зависит от другой проблемы useQuery

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

Привет, я сталкиваюсь с некоторыми проблемами при попытке использовать @apollo/client: latest с next:latest, useQuery хуками и кешем apollo. Итак, шаг за шагом: я использую with-apollo HO C (из следующих примеров) в файле _app.js. Я инициализирую состояние и передаю его в ApolloCache при создании клиента Apollo 

export default function createApolloClient(initialState, ctx) {
  const cache = new InMemoryCache();
  cache.writeData({
    data: {
      config: {
        first: 10,
        __typename: 'CONFIG',
      },
    },
  });
  // The `ctx` (NextPageContext) will only be present on the server.
  // use it to extract auth headers (ctx.req) or similar.
  return new ApolloClient({
    ssrMode: Boolean(ctx),
    link: new HttpLink({
      uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
      fetch,
    }),
    cache,
    typeDefs,
    resolvers: {},
  });
}

В исходном состоянии проекта создается на основе заголовков запросов, здесь я использовал несколько примеров воспроизведения;

В _app.js Компонент оборачивается ConfigProvider, который запрашивает данные из кэша apollo следующим образом: 

export const CONFIG_QUERY = gql`
  query config {
    config @client {
      first
    }
  }
`;

export const ConfigProvider = ({ children }) => {
  const { data, loading } = useQuery(CONFIG_QUERY);

  console.log('loading', loading);
  const config = data ? data.config : {};
  return (
    <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
  );
};

Сразу после ConfigProvider ConfigConusmer передает config в PostsProvider, который использует эту конфигурацию в другом useQuery 

export const PostsProvider = ({ children, config }) => {
  const { data } = useQuery(ALL_POSTS_QUERY, {
    variables: { ...allPostsQueryVars, first: config.first }
  });

  const allPosts = data ? data.allPosts : [];
  return (
    <PostsContext.Provider value={allPosts}>{children}</PostsContext.Provider>
  );
};

Проблема заключается в следующем, когда Next выполняет getDataFromTree(), даже если config уже находится в кеше useQuery в ConfigProvider всегда сначала возвращает loading: true и data: undefined, что приводит к тому, что PostProvider имеет поврежденную переменную, а getDataFromTree выдает ошибку. В результате весь запрос PostProvider вызывается на стороне клиента, а не на стороне сервера.

Может кто-нибудь объяснить мне такое поведение? Почему первый возврат не определен, даже если данные уже находятся в кэше apollo? Есть ли способ заставить его работать?

вот пример codesbox https://codesandbox.io/s/trusting-sinoussi-qw4qi

...