Optimistic cache update for a nested structure

[sagunji]

Can you please help me with the following scenario? I want to add a new annotation node optimistically to the 'hydratedJourneyCanvas' with the ID 'da9dad54-a817-4e56-95f4-97ce2b38ba3f'. Here is my configuration for the optimistic cache and mutation update:

cacheExchange({
  optimistic: {
    createAnnotationNode(args: CreateAnnotationNodeMutationVariables, cache, info) {
         // simply returning the annotation node object doesn't work here
         // What an I missing?
     }
  },
  updates: {
    Mutation: {
      createAnnotationNode: (result, args: CreateAnnotationNodeMutationVariables, cache) => {
        const query = cache.inspectFields('Query').find(field => field.fieldName === 'hydratedJourneyCanvas' && field.arguments?.id === args.input.journeyCanvasId);

        cache.updateQuery({ query: GET_JOURNEY_CANVAS, variables: { ...query?.arguments} }, (data) => {
          const inmemoryData = { ...data };
          inmemoryData.hydratedJourneyCanvas.annotationNodes.push(result.createAnnotationNode)

          return inmemoryData;
        })
      },
    },
  }
}),

The structure of the cache related to the 'hydratedJourneyCanvas' is as follows:

{
  "hydratedJourneyCanvas": {
    "id": string,
    "options": {
      "filter": {
        "state": "DRAFT"
      },
      "edgeFilter": {
        "indirect": false
      }
    },
    "name": string,
    "annotationNodes": AnnotationNode[],
    "contentGraphs": ContentGraphs[],
    "journey": string
  }
}

Could you guide me on how to add a new annotation node optimistically to the 'annotationNodes' field of 'hydratedJourneyCanvas'?

[kitten]

createAnnotationNode needs to return at least a partial result for the mutation, as of the latest version. I can't tell what that actually looks like in your schema — that said, not saying that you should post that, you simply will need to match the return shape of your mutation.

Also updateQuery here may be unnecessary and I'd start out first with something more minimal like cache.link, since most of the time, you'll only want to update links and relations that your mutation can't "see"

See: https://formidable.com/open-source/urql/docs/graphcache/cache-updates/#optimistic-updates
and: https://formidable.com/open-source/urql/docs/graphcache/cache-updates/#writing-links-individually

[sagunji]

1. For my application, on createAnnotationNode returns the following structure:

{
    "data": {
        "createAnnotationNode": {
            "__typename": "AnnotationNodeChange",
            "annotationNode": {
                "__typename": "AnnotationNode",
                "content": "blimp",
                "id": "16b4a6f9-4198-455d-8d8f-b70404bb4721",
                "journeyCanvasId": "da9dad54-a817-4e56-95f4-97ce2b38ba3f",
                "position": {
                    "__typename": "NodePosition",
                    "x": 1078.197808332756,
                    "y": 1047.952028688224
                }
            }
        }
    }
}

If I were to compose the optimistic return to be exact one, it doesn't update the cache.

2. Writing links makes sense but my hydratedJourneyCanvas is composed with variables too.

I assume the link should be resolved to the right field. And, I am not sure what the right approach is here. The straightforward option of updateQuery.

[kitten]

If I were to compose the optimistic return to be exact one, it doesn't update the cache.

I'm not quite sure what you mean.
optimistic returns the result, your update triggers and links the appropriate list to the new AnnotationNode. That's basically it

[sagunji]

Oh! I got it now. Upon close inspection, I think this is how graphcache works.

Do you think I am thinking correctly here?

It was the problem with how I was returning data from optimistic update.