与助手一起使用以使离线功能正常工作

时间:2019-05-10 20:08:02

标签: reactjs react-apollo aws-appsync

今天,我开始研究Appsync提供的脱机功能,这是我第一次感到非常不知所措。我花了整整一天时间浏览一些教程,但是它们并没有为我提供足够的资源来完成任务,或者我只是愚蠢。回到我遇到的放大github文档


import { buildMutation } from 'aws-appsync';
import { listTodos } from './graphql/queries';
import { createTodo, CreateTodoInput } from './graphql/mutations';

(async () => {
  const result = await client.mutate(buildMutation(client,
    gql(createTodo),
    {
      inputType: gql(CreateTodoInput),
      variables: {
        input: {
          name: 'Use AppSync',
          description: 'Realtime and Offline',
        }
      }
    },
    (_variables) => [ gql(listTodos) ],
    'Todo'));

  console.log(result);
})();

所以我尝试使用它。但是我收到了错误client is not defined,但是我已经将app.js包装在了apolloprovider中

const client = new AWSAppSyncClient({
  url: aws_config.aws_appsync_graphqlEndpoint,
  region: aws_config.aws_appsync_region,
  auth: {
    type: aws_config.aws_appsync_authenticationType,
    apiKey: aws_config.aws_appsync_apiKey,
  },
  offlineConfig: {
    callback: (err, succ) => {
      if(err) {
        const { mutation, variables } = err;

        console.warn(`ERROR for ${mutation}`, err);
      } else {
        const { mutation, variables } = succ;

        console.info(`SUCCESS for ${mutation}`, succ);
      }
    },
  },
});

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
    <ArztRoutes/>
    </Rehydrated>
  </ApolloProvider>

据我所知,它会将客户端传递给所有其他类,所以为什么我总是收到此错误以及如何解决该错误。非常感谢!

1 个答案:

答案 0 :(得分:0)

即使将应用程序包装在ApolloProvider中,您仍然需要定义如何访问客户端。例如。名为client的变量将无法全局使用,因此您需要获取它的句柄。查看Apollo文档,您应该可以使用ApolloConsumer来访问客户端(https://www.apollographql.com/docs/react/api/react-apollo#apollo-consumer)。