Блог

В моей базе данных хранится список элементов. Я написал запрос, чтобы случайным образом возвращать один элемент из списка при каждом нажатии кнопки. Я использую useLazyQuery и вызываю возвращаемую функцию для выполнения запроса, и она отлично работает. Я могу вызвать функцию повторной выборки при последующих нажатиях кнопок, и она правильно вернет другой случайный элемент.

Проблема возникает, когда я пытаюсь передать переменные в запрос. Я хочу предоставить различные критерии для запроса, чтобы адаптировать способ выполнения случайного выбора. Любые переменные, которые я передаю при первом вызове, повторяются при каждом повторном вызове, даже если они изменились. Я могу проследить, что они отличаются на клиенте, но распознаватель отслеживает предыдущие переменные.

 // 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
         },
     })
  }
/>
 

Некоторые вещи, которые я пробовал:

• Различные политики кэширования
• Не использовать объект для параметров и определять каждый возможный параметр как отдельную переменную

Я действительно в тупике. Похоже, в документах говорится, что новые переменные должны использоваться, если они предоставлены при повторной выборке. Я не думаю, что политика кэширования имеет отношение к делу…Я получаю свежие результаты при каждом вызове, это просто устаревшие входные переменные.

Наверное, только pick так и называется …

… потому что для <MyBytton/> этого нет изменения реквизита, нет onPick переопределения — всегда используется первое определение обработчика (с первого рендеринга) и options состояние с одного и того же времени …

Попробуйте передать все ( options , pick и refetch ) в качестве прямых реквизитов, чтобы принудительно выполнить повторную передачу и переопределить обработчик:

 <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} />