Не получается обновить state, который пришел из useQuery

Question

    const TodoCard = () => {
      const queryClient = useQueryClient()
      const {
        data,
        error,
        isLoading
      } = useQuery({
        queryKey: ['todos'],
        queryFn: getAllTodos
      })
    
      const updateStatus = useMutation({
        mutationFn: toggleTodoStatus,
        onSuccess: () => {
          queryClient.invalidateQueries(['todos'])
        },
        onMutate: async(todo) => {
          await queryClient.cancelQueries({
            queryKey: ['todos', todo.id]
          })
    
          const previousTodo = queryClient.getQueryData(['todos', todo.id])
    
          queryClient.setQueryData(['todos', todo.id], todo)
    
          return {
            previousTodo,
            todo
          }
        }
      })
    
      if (error) return <p > Error... < /p>;
      if (isLoading) return <p > Loading... < /p>;
    
      return ( <
        ul className = "todo-card" > {
          data?.map((todo) => ( <
            li onClick = {() => updateStatus.mutate({ ...todo,
                completed: !todo.completed
              })
            }
            className = "todo-card__item"
            key = {
              todo.id
            } >
            {
              todo.title
            }({
              todo.completed.toString()
            }) <
            /li>
          ))
        } <
        /ul>
      )
    };
    export {
      TodoCard
    };

    const BASE = 'https://jsonplaceholder.typicode.com'
    
    const apiClient = axios.create({
      baseURL: BASE,
      headers: {
        "Content-type": "application/json"
      }
    });
    
    export const getAllTodos = async(): Promise < Todos[] > => {
      const res = await apiClient.get(`/todos`);
    
      return res.data;
    };
    
    export const toggleTodoStatus = async(todo: Todos): Promise < Todos[] > => {
      return await apiClient.patch(`/todos/${todo.id}`, todo);
    };

Answer 1

 const updateStatus = useMutation({
    mutationFn: toggleTodoStatus,
    mutationKey: ['todos'],
    onMutate: async (newTodo) => {
        await queryClient.cancelQueries({ queryKey: ['todos']})
    
        const previousTodo = queryClient.getQueryData(['todos']) as Todos[]
        const updatedTodos = [...previousTodo]

        const index = updatedTodos.findIndex((todo) => todo.id === newTodo.id)

        if(index !== -1){
            updatedTodos[index] = {
                ...updatedTodos[index],
                ...newTodo
            }
            queryClient.setQueryData(['todos'], updatedTodos)
        }
        return () => queryClient.setQueryData(['todos'], previousTodo)
    },
})

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

БЛОГ НА HUSL

Не получается обновить state, который пришел из useQuery

Ответы (1 шт):