Fetch query is sending on the server twice - reactjs

Question

The result of the mutation should update the data without an unnecessary request to the server, I do not understand what needs to be corrected so that the data is not fetched twice, but taken from the cache.
const [createEvent, { loading }] = useMutation(CREATE_GOOD_MUTATION, {
variables: values,
update(proxy, result) {
// TODO: remove goods from cache
const data = proxy.readQuery({
query: FETCH_ITEMS_QUERY,
});
let newData = [...data.events];
newData = [result.data.events, ...newData];
proxy.writeQuery({
query: FETCH_ITEMS_QUERY,
data: {
...data,
events: {
newData,
},
},
});
},
// refetchQueries: [
// {
// query: FETCH_ITEMS_QUERY,
// },
// ],
onError(err) {
setErrors(err.message);
},
});
enter image description here
Mutation to create a new good:
CREATE_GOOD_MUTATION = gql`
mutation createEvent(
$title: String!
$description: String!
$price: String!
$autor: String!
$pageNumber: String!
$publishYear: String!
) {
createEvent(
eventInput: {
title: $title
description: $description
price: $price
autor: $autor
pageNumber: $pageNumber
publishYear: $publishYear
}
) {
title
description
price
}
}
`;
Query to display all products:
FETCH_ITEMS_QUERY = gql`
query events {
events {
id
title
description
price
}
}
`;
I need to fetch it once, when I try to create a new good by mutation and display all products from the cache, without an additional request.

Answer 1

You should use proxy.modify instead of proxy.readQuery/proxy.writeQuery.
Using cache.modify
Making cache updates with mutation.update function
Try to change your mutation update function to something like this:
update(proxy, result) {
proxy.modify({
fields: {
events(existingEvents = []) {
return [...existingEvents, result.data.createEvent];
}
}
})
},