调用Apollo Client的GraphQL查询

Question

查询截图

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

我在React Web应用程序中使用Apollo Client for GraphQL.任何人都知道如何使用事件中的参数调用查询,例如,我想在用户单击按钮时使用参数触发查询.

Answer 1

要在事件中调用查询,而不是在更高阶的组件中调用查询,您应该:

导入withApollo Hoc

import { withApollo } from 'react-apollo';

用你的组件包裹 withApollo

const component = withApollo(Component)

在组件内部,您将收到一个名为的新道具client,您可以将其用作承诺,例如:

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