Mutation not updating Graphcache cache entry in urql

Question

I am working on a skin care website, and it lets you create skin care routines (Routine in type-defs) with information about how you use your skin care products (ProductUsages in type-defs).

Routine and ProductUsages are many-to-many relations. In type-defs,

  type Routine {
    id: ID!
    # ...
    productUsages: [ProductUsage!]
  }

  type ProductUsage {
    id: ID!
    # ...
    routines: [Routine]
  }

On the routine page, urql runs the currentRoutine query like this:

const ROUTINE_QUERY = gql`
  query CurrentRoutineQuery($routineId: ID!, $ownerId: ID!) {
    currentRoutine(ownerId: $ownerId) {
      productUsages {
        id
        productId
        name
        brand
        category {
          id
          label
        }
        frequency
        rating
      }
      id
    }
    productsWithOtherUsers(routineId: $routineId)
  }
`;

(only currentRoutine query is relevant but including everything here just in case) As you can see, even though it queries a Routine, I'm more interested in ProductUsages in that routine.

Its type-def is as follows:

    currentRoutine(ownerId: ID!): Routine

On the same page, users can search and submit new ProductUsages, with the following type-defs.

    createProductUsageInfo(input: CreateProductUsageInfoInput): ProductUsage

I run this mutation like

const CREATE_PRODUCT_INFO_MUTATION = gql`
  mutation createProductUsageInfo($input: CreateProductUsageInfoInput) {
    createProductUsageInfo(input: $input) {
      id
      weeklyFrequency
      dailyFrequency
      rating
      comment
      routines {
        id
      }
    }
  }
`;

In the resolver, I create and return a productUsage, and include the related routines entity. Graphcache uses id as the key, so I made sure to query id for the productUsage, and for the included routines.

However, the productUsages in currentRoutine query cache, which I mentioned in the beginning, doesn't reflect the new ProductUsage entry created from this mutation. On the urql cache explorer, productUsages doesn't change.

What could I be doing wrong? I've spent so much time over the last few weeks trying to debug this. The only thing that I can think of is that the productUsages in currentRoutines result returned from the resolver looks like productUsages: [{productUsage: {id: 1, ...}}, {productUsage: {id: 2, ...}}], so I included the following resolver under Routine to transform it like productUsages: [{id: 1, ...}, {id: 2, ...}].

    async productUsages(parent) {
      return parent.productUsages.map(
        (productUsage) => productUsage.productUsage
      );
    }

Maybe it doesn't recognize the id because of this? I'm really not sure how to fix this.

Mutation not updating Graphcache cache entry in urql

0 Answers