反应阿波罗客户端api调用两次

Question

这是我的 ApolloClient 的 React 代码

function EmpTable() {      
  const GET_EMPLOYEE = gql`
    query refetch($id: String) {
      employeeById(id: $id) {
        id
        name
        role
      }
    }
  `;

  const {refetch} = useQuery(GET_EMPLOYEE)

  const getEmpByID = (id) => {
    refetch({
      id: id
    }).then((response) => {
      // do something
    })
    
  }

  return (
    <div className="row">
      {/* { I am rending list of employee with map and passing id this way
         <a onClick={() => getEmpByID(id)}>get employ info</a>
      } */}    
    </div>
  );
}

export default EmpTable;

这段代码一切正常，唯一的问题是API被调用了两次，第一次没有返回数据，第二次返回了预期的数据。

如何防止调用两次？

我猜这是第一次执行：const {refetch} = useQuery(GET_EMPLOYEE) 并在没有数据的情况下发出第一个请求，因为那里没有传递任何变量。我知道我可以第一次在useQuery 中传递一个变量，但问题是我不能从那里传递这个变量，因为查询参数不在我的状态或道具中。

谁能告诉我可能的解决方案是什么？

Answer 1

由于文档：

当 React 挂载并渲染一个调用 useQuery 的组件时 hook，Apollo Client 会自动执行指定的查询。但 如果您想执行查询以响应不同的事件，该怎么办？ 比如用户点击一个按钮？ useLazyQuery 钩子非常适合 执行查询以响应组件以外的事件 渲染。这个钩子的作用就像 useQuery，但有一个关键例外： 当 useLazyQuery 被调用时，它不会立即执行它的 关联查询。相反，它在其结果元组中返回一个函数 您可以在准备好执行查询时调用它：

例子：

const GET_COUNTRIES = gql`
  {
    countries {
      code
      name
    }
  }
`;
export function DelayedCountries() {
  const [getCountries, { loading, data }] = useLazyQuery(GET_COUNTRIES);
  if (loading) return <p>Loading ...</p>;

  if (data && data.countries) {
    console.log(data.countries);
  }

  return (
    <div>
      <button onClick={() => getCountries()}>
        Click me to print all countries!
      </button>
      {data &&
        data.countries &&
        data.countries.map((c, i) => <div key={i}>{c.name}</div>)}
    </div>
  );
}

useLazyQuery 将在调用 getCountries 时执行。

https://codesandbox.io/s/apollo-client-uselazyquery-example-6ui35?file=/src/Countries.js