从 React 客户端中调用 graphQL 查询

Question

我正在尝试 return 所有用户交易的列表，但我似乎无法正确调用 graphQL 查询。我在底部定义了查询，并试图在 refreshData() 中调用它。我错过了什么？

  async refreshData() {
    const allTransactions = await graphql(getTransactionsQuery);
    console.log(allTransactions);
    this.setState({
      transactions: allTransactions
    });
  }

  render() {
    const transactionsFromState = this.state.transactions;
    const transactions = transactionsFromState.map((transaction) =>
      <li key={transaction.id}>{transaction}</li>
    );
    return (
      <div className="App">
        <button onClick={() => this.refreshData()}> Refresh Data </button>
        <ul>{ transactions }</ul>
      </div>
    );
  }
}

const getTransactionsQuery = gql`
  query getTransactions($id: ID!) {
    transactions(userId: $id){Transaction}
  }
`;

//change User ID use context.user.id
export default graphql(getTransactionsQuery)(App);

Answer 1

使用 graphql 高阶组件

您调用的 graphql 函数 return 是一个高阶组件，然后可用于包装另一个 React 组件。它不是 return 可以像您尝试做的那样等待的承诺。

您已经（或多或少）正确地使用了它：

export default graphql(getTransactionsQuery)(App)

当你像这样用 graphql HOC 包装你的组件时，你的组件会收到一个 data 道具，然后可以在你的组件的渲染方法中使用它。这消除了利用组件状态来保存查询结果的需要。您的渲染方法应如下所示：

render() {
  const { transactions } = this.props.data 
  const transactionItems = transactions
    ? transactions.map(t => <li key={t.id}>{t}</li>)
    : null
  return (
    <div className="App">
      <button onClick={() => this.refreshData()}> Refresh Data </button>
      <ul>{ transactionItems }</ul>
    </div>
  );
}

data.transactions 在获取查询之前最初是未定义的，因此在渲染函数中注意这一点很重要。您还可以检查 data.loading 以确定查询是否仍在进行中。请查看 Apollo 文档 (here) 以获取更多示例。

获取带有变量的查询

您的查询使用变量，因此需要将这些变量与其一起发送。您需要将它们作为选项传递给 graphql 函数，如下所示：

导出默认 graphql(getTransactionsQuery, { options: { variables: { id: 'youridhere' } } })(App)

Options 通常是传递一个对象，但也可以传递一个函数。此函数将 props 作为参数，因此您可以根据需要从 props 派生变量。例如：

const options = props => ({ variables: { id: props.id } })
export default graphql(getTransactionsQuery, { options })(App)

查看 here 了解更多信息。

正在重新获取数据

由于 Apollo 为您完成了繁重的工作，因此无需按钮即可从您的服务器获取数据。但是如果你需要重新获取你的数据，你可以通过调用 props.data.refetch() 传递给你的组件的 data 属性来实现。您可以阅读有关重新获取的更多信息 here.