从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函数中：

导出默认graphql（getTransactionsQuery，{options：{variables：{id：'youridhere'}}}）（应用程序）

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

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

查看here了解详情。

重新获取数据

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