I’m confused about when useQuery’s conditions result in a new render.
Consider this working example: snowy-shadow-21zjv - CodeSandbox
I would expect the code below to work this way:
- Render a table with 1 todo
- If you click the status cell for a todo, the status is toggled.
- The cache for the list of todos is queried again, and now the one todo’s status has been flipped
- so the component renders and you see the status cell flip to the opposite emoji.
export default function Todos() {
const { data, error, loading } = useQuery(Queries.GET_ALL_TODOS);
const [toggleTodo] = useMutation(Mutations.TOGGLE_TODO, {
refetchQueries: [{query: Queries.GET_ALL_TODOS}]
});
if (error) return error.message;
if (loading) return "Loading...";
return (
<table>
<thead>
<tr>
<td>Description</td>
<td>Status</td>
</tr>
</thead>
<tbody>
{data.todos.map((todo) => {
return (
<tr key={todo.id}>
<td>{todo.text}</td>
<td
onClick={() => {
toggleTodo({ variables: { id: todo.id.toString() } });
}}
>
{!!todo.completed ? "✅" : "❌"}
</td>
</tr>
);
})}
</tbody>
</table>
);
}
the way i have it working in the linked sandbox, i have to manually modify the cache in my mutation’s update() in order to get what react renders to reflect what the apollo dev tools show in the cache. by that i mean, if i look in the cache dev tools after running the toggle mutations, i can see that the todo i’m toggling has flipped its completed status as expected. but the refetch queries approach doesn’t work the way i’d expect.
i’m assuming that i’m abusing the API’s somehow, but i don’t know where to look.