Make the urql parameter from @urql/storybook-addon more type safe

[jgoux]

Hello all,

I recently used the @urql/storybook-addon to provide fake data to my stories. I was wondering if there is a way to leverage the types I already have thanks to @graphql-codegen/typescript-urql in order to provide data that are type-checked against the typed operations I use in the story.

I made a few helpers in order to manipulate the types and extract the interesting bits, but I'm still unsatisfied with the result, I still need to have type casting in some places.

Here is the data for a story having both a subscription and a mutation :

// extract the Operation type from the generated hooks directly
type CreateTaskMutation = GetOperation<typeof useCreateTaskMutation>;
type TasksSubscription = GetOperation<
  typeof useTaskListScreenTasksSubscription
>;

// union of all the story's operations
type StoryOperation = CreateTaskMutation | TasksSubscription;

const urql: UrqlParameter<StoryOperation> = (operation) => {
  // type guard function to narrow the type to CreateTaskMutation, it's unsafe because we can't statically ensure that "createTask" is the name of the CreateTaskMutation operation
  if (isOperation<CreateTaskMutation>(operation, "createTask")) {
    return {
      data: {
        createTask: {
          __typename: "TaskCreated",
          task: {
            done: true,
            id: "1",
            name: operation.variables?.input.name,
          },
        },
      },
    // Without this type cast, the autocompletion can be compatible with both UrqlParameterResponse<CreateTaskMutation, CreateTaskMutationVariables> and UrqlParameterResponse<TaskListScreenTasksSubscription, TaskListScreenTasksSubscriptionVariables>
    } as UrqlResponse<CreateTaskMutation>;
  }

  if (isOperation<TasksSubscription>(operation, "TaskListScreen_tasks")) {
    return {
      data: {
        tasks: [
          {
            done: false,
            id: "1",
            name: "Task 1",
          },
        ],
      },
    } as UrqlResponse<TasksSubscription>;
  }

  throw new Error("Unknown operation");
};

Here is all the helpers (I'm not a TS wizzard 🧙‍♂️ ) : https://gist.github.com/jgoux/1573f2730cf34d021c1e263c74f7c926

Maybe I'm overthinking it 😅

[RIP21]

Slightly unrelated to your question, but just to mention.

I highly recommend not to use @graphql-codegen/typescript-urql but use @graphql-codegen/typed-document-node instead.
https://github.com/dotansimha/graphql-typed-document-node (it's also recommended by the authors of codegen)
This will make you avoid generating useNameOfTheQueryQuery() so you will use only useQuery({ query: NameOfTheQueryDocument }) to get the same typed variables and query result without useNameOfTheQueryQuery boilerplate code that ends up in your bundle.
It's also great as it's library agnostic, so any library that supports TypedDocumentNode gets autogenerated typing for them :)

[jgoux]

I actually started with @graphql-codegen/typed-document-node but came back to @graphql-codegen/typescript-urql because I find it simpler to just directly use the generated hook and don't have to manually wire the query with the hook function. I'm ok with the extra size in this case. 👍 It's a great solution as well but we plan to only use it with urql.