调用Apollo Client的GraphQL查询

Question

query screenshot

const allTeamApplicants = gql`
  query ($id: ID!) {
    allApplicants(filter: { user: { id: $id } }) {
      id
      firstName
      lastName
      appliedPosition
      applicationStage
      isFormFilled
      isContractSigned
      email
      phoneNumber
}

我在 React 网络应用程序中使用 Apollo Client for GraphQL。谁知道如何在事件中调用带参数的查询，例如我想在用户单击按钮时触发带参数的查询。

Answer 1

要在事件中而不是在高阶组件中调用查询，您应该：

使用 Apollo Hoc 导入

import { withApollo } from 'react-apollo';

用 withApollo

包裹你的组件

const component = withApollo(Component)

在您的组件中，您将收到一个名为 client 的新道具，您可以将其用作 Promise，例如：

function eventHandler(idParam) {
  client.query({
    query: gql`
      query ($id: ID!) {
        allApplicants(filter: { user: { id: $id } }) {
          id
          firstName
          lastName
          appliedPosition
          applicationStage
          isFormFilled
          isContractSigned
          email
          phoneNumber
        }
      }`,
      variables: {
        // set the variables defined in the query, in this case: query($id: ID!)
        id: idParam 
      }
    }
  })
  .then(...)
  .catch(...)
}

更多信息在这里：https://www.apollographql.com/docs/react/api/react-apollo.html#withApollo

调用Apollo Client的GraphQL查询

invoking Query of GraphQL of Apollo Client

reactjs

graphql

react-apollo