TS Errors trying to make a generic function to use with tanstack/query & gql.tada

[radiosilence]

Hello, I'm trying to make a generic getOptions function that handles a document and it's args and can be used as the argument for tanstack query's stuff. Here's my attempt so far, however I get a TS error and I'm not sure if I'm doing something wrong or the types are awkward - it works fine if I pass in concrete types!

import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
import { graphql, type TadaDocumentNode } from "gql.tada";
import { Graffle } from "graffle";
import type { ComponentType } from "react";

export const graffle = Graffle.create().transport({
  url: "https://rickandmortyapi.com/graphql",
});

// example doc from r&m free api
export const CharacterDocument = graphql(`
  query Character($id: ID!) {
    character(id: $id) {
      name
    }
  }
`);

// example doc from r&m free api
export const CharactersDocument = graphql(`
  query Characters {
    characters {
      results {
        name
      }
    }
  }
`);

export const getOptions = <
  Data extends Record<string, unknown>,
  Vars extends Record<string, unknown>,
>(
  doc: TadaDocumentNode<Data, Vars>,
  vars?: Vars,
) => {
  return queryOptions({
    queryKey: [doc, vars] as const,
    queryFn: ({ queryKey: [doc, vars] }) => {
      /* Argument of type '[Vars]' is not assignable to parameter of type
      'SendArguments__<IsUnknown<Vars> extends true ? Variables : Vars, GetVariablesInputKind<IsUnknown<Vars> extends true ? Variables : Vars>>'. (ts 2345) */
      return graffle.gql(doc).send(vars);
    },
  });
};

// Concrete example works fine!!!
export const getCharacterOptions = (id: string) => {
  return queryOptions({
    queryKey: [CharacterDocument, { id }] as const,
    queryFn: ({ queryKey: [doc, vars] }) => graffle.gql(doc).send(vars),
  });
};

export const Character: ComponentType<{ id: string }> = ({ id }) => {
  // A nice succinct function that can be used in SSR or CSR
  const generic = useSuspenseQuery(getOptions(CharacterDocument, { id }));
  const list = useSuspenseQuery(getOptions(CharactersDocument));
  const concrete = useSuspenseQuery(getCharacterOptions(id));
  return (
    <>
      {generic.data?.character?.name}
      {concrete.data?.character?.name}
      {JSON.stringify(list.data?.characters?.results)}
    </>
  );
};

Funnily enough data/args are all inferred correctly, it's purely the .send() that fails.

[radiosilence]

Two solutions that rely on a type assertion, so profoundly non-ideal :/

export const getOptions2 = <
  TDoc extends TadaDocumentNode<any, any>,
  TVars extends TDoc extends TadaDocumentNode<any, infer V> ? V : never,
>(
  doc: TDoc,
  vars?: TVars,
) =>
  queryOptions({
    queryKey: [doc, vars] as const,
    queryFn: ({ queryKey: [d, ...rest] }) => {
      const gqlDoc = graffle.gql(d);
      return gqlDoc.send(...(rest as Parameters<typeof gqlDoc.send>));
    },
  });

export const getOptions = <
  TData extends Record<string, unknown>,
  TVars extends Record<string, unknown>,
>(
  doc: TadaDocumentNode<TData, TVars>,
  vars?: TVars,
) =>
  queryOptions({
    queryKey: [doc, vars] as const,
    queryFn: ({ queryKey: [d, ...rest] }) => {
      const gqlDoc = graffle.gql(d);
      return gqlDoc.send(...(rest as Parameters<typeof gqlDoc.send>));
    },
  });

[jasonkuhrt]

Hey, could you make a tiny repro repo? I’ll take a look

[wcastand]

what makes it extra hard is that almost no types from Graffle seems to be exposed in the package :/