Optimistic update for paginated edges when mutating?

Help
1

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? :sweat_smile:

2

Maybe writeQuery or writeFragment can help. Have you tried using those yet?