使用 React Native AsyncStorage 的 GraphQL 查询答案

【问题标题】：GraphQL query using React Native AsyncStorage使用 React Native AsyncStorage 的 GraphQL 查询
【发布时间】：2018-01-01 03:17:36
【问题描述】：

我正在尝试构建一个组件，使用 React Native 和 Apollo Client 执行以下查询：

query getTable($tableId:String!){
   getTable(id:$tableId){
      users{
      name
      imageURL
   }
}

所以，上面的查询有一个名为tableId 的变量，并且该值使用AsyncStorage 方法存储。有没有办法从 AsyncStorage 中获取值并将其用作查询变量。

我尝试执行以下操作，但没有成功：

graphql(Query, {
  options: {
    tableId: await AsyncStorage.getItem('table'),
  },
})(MyComponent);

【问题讨论】：

标签： react-native graphql apollo

【解决方案1】：

在我看来，这样做的首选方式如下：

在父组件中调用 AsyncStorage.getItem()，然后将结果作为 prop 传递给 MyComponent。 As illustrated in the docs，options 可以是一个函数而不是一个对象，在这种情况下，它会将组件的 props 作为第一个参数传递给它。因此，假设 prop 名为 tableId，您的 HOC 将如下所示：

graphql(Query, { options: ({ tableId }) => ({ variables: { tableId } }) })

或者，您可以使用一些默认值设置查询：

graphql(Query, { options: { variables: { tableId : 'foo' } } })

您可以在组件的 componentDidMount() 方法中调用 AsyncStorage.getItem() 并将结果分配给组件的状态。您的组件在渲染时将有一个可用的 data 道具。您可以从您的渲染函数中调用this.props.data.refetch({ tableId: this.state.tableId }) 来强制使用新的可用ID 更新查询。

我认为这比第一个选项干净得多，并且需要额外的逻辑来防止你的组件调用 refetch 或不必要地重新渲染......但如果由于某种原因你不想改变它应该仍然有效父组件。

【讨论】：

在哪里传递架构？我认为应该使用schema、query、data 执行每个查询，但您没有提供架构