Не удалось найти «клиента» в контексте ApolloConsumer - PullRequest
Новая
       48

Не удалось найти «клиента» в контексте ApolloConsumer

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

Я пытаюсь реализовать реактив-аполлон для хранения своих локальных состояний, я могу написать им, используя client.writeData (), но когда я пытаюсь получить к ним доступ, я получаю ошибки

Я пытался следовать https://github.com/wesbos/Advanced-React/tree/master/finished-application/frontend. Я также пытался реализовать apollo-link-state, но продолжает выдавать ошибку.

withData.js 

import withApollo from "next-with-apollo";
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
const cache = new InMemoryCache();

function createClient({ headers }) {
  return new ApolloClient({
    cache,
    link: new createHttpLink({
      uri: "http://localhost:4000/",
      request: operation => {
        operation.setContext({
          fetchOptions: {
            credentials: "same-origin"
          },
          headers: {
            "Content-Type": "application/json"
          }
        });
      }
    }),
    clientState: {
      resolvers: {
        Query: {
          getLocalData: (_, { text }, { cache }) => {
            const query = gql`
              query getLocalData {
                loading @client
              }
            `;
            const previous = cache.readQuery({ query });
            return previous.loading;
          }
        },
        Muatation: {
          toggleLoading: (_, { text }, { cache }) => {
            const query = gql`
              query getLocalData {
                loading @client
              }
            `;
            var previous = cache.readQuery({ query });
            cache.writeData({ data: { loading: !previous.loading } });
            return null;
          }
        }
      },
      defaults: {
        loading: true,
      },
      typeDefs: {}
    }
  });
}

export default withApollo(createClient);

_app.js 

import App, { Container } from 'next/app';
import Page from '../components/Page';
import { ApolloProvider } from 'react-apollo';
import withData from '../lib/withData';

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    // this exposes the query to the user
    pageProps.query = ctx.query;
    return { pageProps };
  }
  render() {
    const { Component, apollo, pageProps } = this.props;

    return (
      <Container>
        <ApolloProvider client={apollo}>
          <Page>
            <Component {...pageProps} />
          </Page>
        </ApolloProvider>
      </Container>
    );
  }
}

export default withData(MyApp);

Я рассчитываю на эффективную работу но фактический результат: Не удалось найти «клиента» в контексте ApolloConsumer. Оберните корневой компонент в

...