Obtengo una lista de tareas pendientes con useQuery.
const { data, refetch } = useQuery(GET_TODOS);Después de crear una tarea pendiente, obtengo una lista de tareas pendientes con recuperación como se muestra a continuación.
const [ addTodo ] = useMutation(ADD_TODO, { onComplete: () => refetch() }); const handleAddTodo = useCallback((todoArgs) => { addTodo({ variables: todoArgs }); }, []);Pero obviamente es tiempo perdido.
Traté de actualizar solo en una parte actualizada. para eso, guardé todos en un estado y cambié esto.
const [todos, setTodos] = useState([]); ... const [ addTodo ] = useMutation(ADD_TODO, { onComplete: (updatedData) => { setTodos((prevTodos) => { const newTodos = prevTodos.map((todo) => todo.id === updatedData.id ? updatedData : todo); return newTodos; }); } } ... useEffect(() => { setTodos(data); }, [data]); ...Pero no estoy seguro de que sea una forma correcta. Creo que puede haber una forma oficial de actualizar una parte de los datos.
¿Cuál es la mejor manera de obtener datos parciales después de crear, actualizar y eliminar?
Estoy usando 'sin caché' como opción predeterminada en el proyecto.
Administrar la respuesta de la consulta en un nuevo estado me parece un poco exagerado.
De hecho, el cliente Apollo GraphQL recupera automáticamente los datos actualizados, siempre que devuelva el campo de identificación de datos actualizado en el resultado de la mutación.
Para otros casos, es posible que desee utilizar una opción de función de actualización personalizada.
Puedes leer mas al respecto aquí:
https://www.apollographql.com/blog/apollo-client/caching/when-to-use-refetch-queries/