Adding optimisticResponse

[lukashambsch]

I'm trying to add support for optimisticResponse on mutations on this branch: https://github.com/lukashambsch/reason-apollo-hooks/tree/add-optimistic-response. I've added it and it doesn't seem to be working correctly because of missing __typename attributes.

I'm getting the following warnings only when using `optimisticResponse'.

You're using fragments in your queries, but either don't have the addTypename:
  true option set in Apollo Client, or you are trying to write a fragment to the store without the __typename.
   Please turn on the addTypename option and include __typename when writing fragments so that Apollo Client
   can accurately match fragments.

Could not find __typename on Fragment

DEPRECATION WARNING: using fragments without __typename is unsupported behavior and will be removed in future versions of Apollo client. You should fix this and set addTypename to true now.

Along w/ Missing field __typename for each nested object within the type.

Here is how I'm defining the optimisticResponse object when using it:

let optimisticResponse: UpdateGroceryListItem.t = {
    "updateGroceryListItem":
      Some({
        "id": groceryListItem##id,
        "amount": groceryListItem##amount,
        "isPurchased": !groceryListItem##isPurchased,
        "unitName": groceryListItem##unitName,
        "food": groceryListItem##food,
      }),
  };

Does anyone have any ideas on the possible source of the issue? Maybe my implementation of optimisticResponse is wrong?

[mbirkegaard]

You can see how we've done it here https://github.com/mbirkegaard/reason-apollo-hooks/commit/3a85c459c42f472a9b4e6a5c5254c259273178a1. Waiting for the API change to be done with before adding the PR.

The problem is indeed that optimisticResponse doesn't have the right shape for apollo. The outermost type needs to be a mutation and you need to add __typename fields for all the nested types.

The docs give this example

          optimisticResponse: {
            __typename: "Mutation",
            updateComment: {
              id: commentId,
              __typename: "Comment",
              content: commentContent
            }
          }

The easiest way of getting the shape of the object you need to supply to the underlying js is to fire the mutation and checking the network response in your dev tools. optimisticResponse needs to be the same underlying shape as the js object at data.whateveryounamedyourmutation in the response.

[lukashambsch]

@mbirkegaard That helped a ton! I was able to get it working now. Thanks!