reactjs - Apollo useLazyQuery 钩子(Hook)在重新获取时使用旧变量(而不是新变量)

Question

我的数据库存储项目列表。我编写了一个查询，每次单击按钮时从列表中随机返回一个项目。我使用 useLazyQuery 并调用返回的函数来执行查询，它工作正常。我可以在随后的按钮按下时调用 refetch 函数，它会正确返回另一个随机项目。
当我尝试将变量传递给查询时，问题就来了。我想为查询提供不同的标准以定制随机选择的方式。我传递给第一次调用的任何变量都会在每次重新获取时重复，即使它们已经改变。我可以追踪它们在客户端上是不同的，但解析器会追踪以前的变量。

// My query
const PICK = gql`
  query Pick($options: PickOptionsInput) {
    pick(options: $options) {
      title
    }
  }
`;

// My lazy hook
const [pick, { data, refetch }] = useLazyQuery(PICK, {
    fetchPolicy: "no-cache",
  });


// My button
<MyButton
  onPick={(options) =>
     (refetch || pick)({ // Refetch unless this is the first click, then pick
         variables: {
            options      // Options is a custom object of data used to control the pick
         },
     })
  }
/>

我尝试过的一些事情:

各种缓存策略

不为选项使用对象并将每个可能的选项定义为不同的变量

我真的很难过。似乎文档说如果在重新获取时提供了新变量，则应该使用它们。我不认为缓存策略是相关的......每次调用我都会得到新的结果，只是输入变量是陈旧的。

Answer 1

我猜只有 pick叫做 ...
...因为对于 <MyBytton/>没有 Prop 变化，没有onPick重新定义 - 总是使用的第一个处理程序定义(从第一次渲染开始)和 options从同一时间状态...
尝试将所有( options 、 pick 和 refetch )作为直接 Prop 来强制重新渲染和处理程序重新定义:

<MyButton
  options={options}
  pick={pick}
  refetch={refetch}
  onPick={(options) =>
     (refetch || pick)({ // Refetch unless this is the first click, then pick
         variables: {
            options      // Options is a custom object of data used to control the pick
         },
     })
  }
/>

... 或 [更好] 在将处理程序传递给 <MyButton/> 之前定义处理程序:

const pickHandler = useCallback( 
  (options) => {
     if(refetch) {
       console.log('refetch', options);
       refetch( { variables: { options }});
     } else {
       console.log('pick', options);
       pick( { variables: { options }});
     }
  },
  [options, pick, refetch]
);

<MyButton onPick={pickHandler} />