Question

我正在尝试构建一个组件，使用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);

Answer 1

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

在父组件中调用AsyncStorage.getItem（），然后将结果作为prop传递给MyComponent。 As illustrated in the docs，选项可以是函数而不是对象，在这种情况下，它将组件的道具作为第一个参数传递给它。因此，假设道具被称为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进行更新。

我认为这比第一个选项干净得多，并且需要额外的逻辑来防止你的组件不必要地调用重新获取或重新呈现......但是如果由于某种原因你不应该这样做，它仍然可以工作。我想改变父组件。

使用React Native AsyncStorage的GraphQL查询

1 个答案: