React Query – использовать ответ от выборки списка на setQueryData для каждого элемента?

Я получаю список элементов для отображения на странице списка — назовем их Todos. Извлечение осуществляется с помощью специального хука реагирования, который кэширует ответ под ключом запроса ['todo-list']. Когда я получаю список, я получаю все данные для каждого дела в ответе. Затем я визуализирую список, сопоставляя ответ с компонентом <Todo>, передавая элемент в качестве реквизита.

Проблема, с которой я столкнулся, заключается в том, что эти элементы отображаются в нескольких разных местах, и в каждом месте используется другой ключ запроса. Итак, там, где у меня есть ['todo-list'], у меня также есть ['my-todo-list'], ['all-todo-list'] и т. д. Эти элементы Todo могут быть «завершены», что запускает вызов мутации на серверной части, но оптимистично обновляет (через setQueryData) отдельный элемент, чтобы пользовательский интерфейс отражал изменения. немедленно, не дожидаясь разрешения мутации и повторной выборки запроса списка. Вносить такие оптимистичные обновления в несколько списков задач довольно сложно и кажется неэффективным.

Мой вопрос: имеет ли смысл использовать ответ любого запроса списка дел на setQueryData для отдельных элементов? Например, setQueryData(['todo', todo.id], todo). Тогда любые дочерние компоненты, которым необходимо визуализировать эти данные, смогут просто получить объект Todo из кеша реагирующих запросов, при этом в качестве реквизита будет передано только поле id.

В любом случае это считается антипаттерном или плохой практикой?

Вот базовый пример запроса todo-list:

// custom react-query hook
export const useTodos = () => {
  const todoQuery = useQuery(
    ['todo-list'],
    () => {
      return fetchTodos()
    }
  )

  // Set the todo data in the cache
  const queryClient = useQueryClient()
  todoQuery.data?.todos?.forEach((todo) => {
    queryClient.setQueryData(['todo', todo.id], todo)
  })

  return todoQuery
}

Это очень простой пример использования компонента Todo:

// Todo component
function Todo({id}) {
  const {data, isLoading} = useTodoById(id)
  if (isLoading) {
    return <p>Loading...</p>
  }

  return (
    <h1 className = "todo">{todo.title}</h1>
  )
}

export default Todo

Также стоит отметить, что крючок useTodoById также является настраиваемым хуком реагирования на запросы, который извлекает одно задание по его идентификатору — значение кэшируется под ключом запроса ['todo', todo.id]. Есть набор staleTime на 10 минут.