reactjs - 从 React 客户端调用 graphQL 查询

Question

我正在尝试返回所有用户交易的列表，但我似乎无法正确调用 graphQL 查询。我已经在底部定义了查询，并尝试在刷新数据()中调用它。我错过了什么？

  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 组件。它不会返回可以像您尝试做的那样等待的 promise 。

您已经在这里(或多或少)正确地使用了它:

export default graphql(getTransactionsQuery)(App)

当您像这样使用 graphql HOC 包装组件时，您的组件会收到一个 data 属性，然后可以在组件的 render 方法中使用该属性。这不需要利用组件状态来保存查询结果。您的渲染方法应如下所示:

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)

选项通常传递一个对象，但也可以传递一个函数。该函数将 props 作为参数，以便您可以根据需要从 props 派生变量。例如:

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

检查here了解更多信息。

重新获取数据

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