Using cache.writeFragment in a mutation update weird behavior

[codingnuclei]

Hi,

Let me start by saying this might be my lack of understanding of how the @urql/exchange-graphcache works but let me explain what I am observing.

I have a query "getTodo"
and two mutations:

1. UpdateTodo -> returns the full Entity
2. LikeTodo -> does not return full Entity so using cache.writeFragment

As expected when mutating using the "UpdateTodo" the update is reflected in the UI

However, when using "LikeTodo" it does not.

The LikeTodo's mutation update is very simple, cache.readFragment followed by a cache.writeFragment, incrementing a "like_count" and setting a field "liking" to true

As a debugging step, I re-read the cache and it confirms my write has gone through ok.

Is this expected? Or should the update using cache.writeFragment also update the query stream like the "automagical" one does for "UpdateTodo"

Thanks in advance :)

[kitten]

It should definitely also update your entity and be reflected in the query; it's probably best if you'd return the entire entity in the mutation if possible since that caters more to your app then, but for the sake of ignoring the API since we're not talking about that, what does your code for that look like? And do you see any warnings in the console?

[codingnuclei]

it's probably best if you'd return the entire entity in the mutation if possible since that caters more to your app then

Agreed. Am currently talking to the server team to make this happen in their next update.

And do you see any warnings in the console?

Nope. No errors, I have the debugExchange and can see both the "Incoming operation" and "Completed operation". The mutation update is also hit with me able to step through the function below in the debugger. It seems like the cache is updated correctly with all the correct info.

like(_result: LikeMutation, args: LikeMutationVariables, cache, _info) {
          const recipeLikeFragment = gql(`
          fragment recipeLike on RecipeV2 {
            UUID
            liked_count
            liked
            __typename
          }
        `);
          const data = cache.readFragment<RecipeV2, GetRecipeQueryVariables>(recipeLikeFragment, {
            UUID: args.input.UUID,
            __typename: 'RecipeV2'
          });

          cache.writeFragment<RecipeV2, GetRecipeQueryVariables>(recipeLikeFragment, {
            UUID: args.input.UUID,
            liked_count: (data?.liked_count ?? 0) + 1,
            liked: true,
            __typename: 'RecipeV2'
          });

          // For debugin check cache again in this case check == what is expected
          const check = cache.readFragment<RecipeV2, GetRecipeQueryVariables>(recipeLikeFragment, {
            UUID: args.input.UUID,
            __typename: 'RecipeV2'
          });
        },

Hope I have missed anything stupid :)

I do have a custom slim wrapper around the wonka streams converting them to rxjs. I am discounting this as a possible point of error as the update mutation works as expected.

I have added a tap(_ => console.log(_)), in that query stream and nothing is logged out on the Like mutation, but is on the Update mutation. But as I am running out of ideas I have added it below. Just incase :)

rxWatchQuery<Data, Variables extends object = {}>(
    query: DocumentNode | TypedDocumentNode<Data, Variables> | string,
    variables?: Variables,
    context?: Partial<OperationContext>
  ): Observable<rxWatchQueryStateResponse<Data, Variables>> {
    const request = createRequest<Data, Variables>(query, variables);
    return new Observable((observer: any) => {
      const obs = pipe(
        this.executeQuery<Data>(request, context),
        tap(_ => console.log(_)),
        onEnd(() => console.log('onEnd')),
        toObservable
      ).subscribe(observer);
      return () => obs.unsubscribe();
    }).pipe(
      map(
        (result: any) =>
          ({
            fetching: false,
            ...result,
            refetch: (opts?: Partial<OperationContext>) => {
              return pipe(
                this.executeQuery<Data, Variables>(request, {
                  ...context,
                  ...opts
                }),
                take(1),
                toPromise
              );
            }
          } as rxWatchQueryStateResponse<Data, Variables>)
      ),
      finalize(() => console.log('finalize')),
      startWith({
        fetching: true,
        stale: false,
        error: undefined,
        data: undefined,
        extensions: undefined,
        operation: undefined,
        refetch: undefined
      })
    );
  }

(just as a note: using rxjs from() works in chrome but not firefox or (surprisingly) the lasted version of edge. So I am manually using the Observable here)

[codingnuclei]

Oh just incase: I have a key mapping for the entity : RecipeV2: (data: RecipeV2) => data.UUID

[codingnuclei]

ok was kinda being a numpty on this one. As I had two version of the entity ("list" query was getting v2, "get" query was v1 ) updating one naturally didn't update the other.

I can confirm if I update the correct entity then it is reflected in the query.

Sorry for the time wasting 👎

[kitten]

No worries! It takes some getting used to after all 🙌