I have a many-to-many relationship between Retailer
and Product
. The relation or the edge has a enabled
flag, this is placed on the edge itself, not on the product node. How can I update the edge in Apollo Cache after a mutation?
The following query describes my GraphQL structure:
query {
retailer(retailerId: 3) {
name
products(first: 2) {
totalCount
edges {
enabled
node {
id
description
}
}
}
}
}
result:
{
"data": {
"retailer": {
"name": "The best bakery",
"products": {
"totalCount": 1079,
"edges": [
{
"enabled": false,
"node": {
"id": "UHJvZHVjdAppMTk5OQ==",
"description": "Bread"
}
},
{
"enabled": true,
"node": {
"id": "UHJvZHVjdAppMjAwMA==",
"description": "Butter"
}
}
]
}
}
}
}
In my app I have a GetRetailerProducts
query and a EnableRetailerProduct
mutation. I use refetchQueries in my mutation:
const [enableProduct] = useEnableRetailerProductMutation({
refetchQueries: [
{
query: GetRetailerProductsDocument,
variables: {
retailerId: retailerId,
cursor: undefined,
filter: {
productSearchTerm: searchTerm,
},
},
},
],
});
This “works”. When I run the mutation to enable a product for a retailer the query in refetchQueries is run, fetching all pages of products. The problem is that this is pretty slow, I need to fetch multiple pages of products before the enabled
flag is updated.
In other mutation scenarios I just returned the changed data in the mutation response and used optimistic updates. But the enabled
data in this case is placed on the “edge” in the relay connection, not on the node itself. How can I solve this?