如何在单击按钮时使用graphql useQuery方法查询或手动查询

时间:2019-12-12 09:03:51

标签: reactjs graphql

与页面加载一样,查询工作正常,但是我的要求是像单击按钮一样再次查询。

const JOB_LIST_QUERY = gql`
query detail($userId: Int!) {
candidate(id:$userId){
  id
  selected:manageCandidates(status:5){
    id
    interviewType
    interviewDate
  }
 }
}
;`

const { loading, error, data } = useQuery(JOB_LIST_QUERY, {
variables: {
  userId: Number.parseInt(userId.toString()),
},
onCompleted: data => {
  setSelectedJobList(data.candidate.selected)
},
onError: error => {
  console.log(error.message)
}
});

单击按钮后,我要再次进行查询。 有没有一种方法可以在函数内声明,以便也可以在单击按钮和页面加载时调用它。

1 个答案:

答案 0 :(得分:1)

您可以useLazyQuery挂钩将返回一个可以在组件加载或单击时手动调用的IE的函数。

function Hello() {
  const [loadGreeting, { called, loading, data }] = useLazyQuery(
    GET_GREETING,
    { variables: { language: "english" } }
  );

  if (called && loading) return <p>Loading ...</p>

  if (!called) {
    return <button onClick={() => loadGreeting()}>Load greeting</button>
  }

  return <h1>Hello {data.greeting.message}!</h1>;
}