使用帮助程序使离线功能正常工作

Question

今天，我开始了解 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>

根据我的理解，这会将客户端传递给所有其他类那么为什么我一直收到此错误以及如何解决它。非常感谢！

Answer 1

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

使用帮助程序使离线功能正常工作

Getting With helper for offline capabilities to work

reactjs

react-apollo

aws-appsync