Relay-compiler-language-typescript: [experimental] No type-safe optimisticResponse when using useMutation

Created on 19 May 2020 · 17Comments · Source: relay-tools/relay-compiler-language-typescript

Versions in package.json

{
 "relay-compiler-language-typescript": "^12.0.2",
 "react": "^0.0.0-experimental-33c3af284",
 "react-dom": "^0.0.0-experimental-33c3af284",
 "react-relay": "^0.0.0-experimental-895a6fe0"
}

I'm creating a mutation function like this:

const [createGalleryItem, isCreating] = useMutation<
    MediaTabUploadMutation
  >(graphql`
    mutation MediaTabUploadMutation($input: GalleryItemCreateInput!) {
      createGalleryItem(input: $input) {
        galleryItem {
          ...MediaGalleryItem_galleryItem
        }
      }
    }
  `)

The mutation config typescript definition excepts something called rawResponse (I think the full response without masked fragments)

@types/react-relay/lib/relay-experimental/useMutation.d.ts

import { GraphQLTaggedNode, Disposable, MutationConfig, MutationParameters, IEnvironment, PayloadError, DeclarativeMutationConfig, SelectorStoreUpdater, UploadableMap } from "relay-runtime";

export interface UseMutationConfig<TMutation extends MutationParameters> {
    configs?: DeclarativeMutationConfig[];
    onError?: (error: Error) => void;
    onCompleted?: (
        response: TMutation["response"],
        errors: PayloadError[],
    ) => void;
    onUnsubscribe?: () => void;
    optimisticResponse?: TMutation["rawResponse"];
    optimisticUpdater?: SelectorStoreUpdater;
    updater?: SelectorStoreUpdater;
    uploadables?: UploadableMap;
    variables: TMutation["variables"];
}

// tslint:disable-next-line no-unnecessary-generics
export function useMutation<TMutation extends MutationParameters>(
    mutation: GraphQLTaggedNode,
    commitMutationFn?: (environment: IEnvironment, config: MutationConfig<TMutation>) => Disposable,
): [(config: UseMutationConfig<TMutation>) => Disposable, boolean];

But the MediaTabUploadMutation does not contain a rawResponse

import { ConcreteRequest } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type GalleryItemCreateInput = {
    title: string;
    file: unknown;
};
export type MediaTabUploadMutationVariables = {
    input: GalleryItemCreateInput;
};
export type MediaTabUploadMutationResponse = {
    readonly createGalleryItem: {
        readonly galleryItem: {
            readonly " $fragmentRefs": FragmentRefs<"MediaGalleryItem_galleryItem">;
        };
    };
};
export type MediaTabUploadMutation = {
    readonly response: MediaTabUploadMutationResponse;
    readonly variables: MediaTabUploadMutationVariables;
};

So my optimistic response it not type-safe a.t.m. I'm not really sure it belongs here but I think it does.

Source

RichardLindhout

👍1

Most helpful comment

it is explicit in the docs https://relay.dev/docs/en/a-guided-tour-of-relay#optimistic-updates

that we need to use @raw_response_type when handling optimistic updates

thanks

sibelius on 20 May 2020

👍4 ❤1