从 React 客户端调用 graphQL 查询

Question

我正在尝试返回所有用户交易的列表，但我似乎无法正确调用 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 函数返回一个高阶组件，该组件可用于包装另一个 React 组件。它不会像您尝试的那样返回可以等待的承诺。

您已经在此处（或多或少）正确地使用它：

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 函数，如下所示：

export default graphql(getTransactionsQuery, { options: { variables: { id: 'youridhere' } } })(App)

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

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

查看here了解更多信息。

重新获取数据

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