genql icon indicating copy to clipboard operation
genql copied to clipboard

Recursive union types can not be used in Remix app

Open estyrke opened this issue 2 years ago • 2 comments

As described in #108, when making a query on a union, the result type will include all fields of the union regardless if they were selected or not. This causes issues with recursive types in e.g. Remix loader functions.

See CodeSandbox at https://codesandbox.io/p/sandbox/xenodochial-hill-qckj7d for an example - the error is in app/routes/_index.tsx at line 22.

estyrke avatar Jun 30 '23 10:06 estyrke

This looks like a problem with Remix very complex typescript type, i would just do this to fix the issue

export const loader = async (_args: LoaderArgs) => {
  const client = createClient({
    url: new URL("/graphql", _args.request.url).href,
  });
  const { me } = await client.query({ me: { id: true, firstname: true } });
  return ({ currentUser: me });
};

export default function Index() {
  const data: Awaited<ReturnType<typeof loader>> = useLoaderData<any>();

remorses avatar Jun 30 '23 10:06 remorses

Thanks for the quick feedback! The reason for the json call is that the loader runs on the server and is sent serialized to the client. So some types, such as Dates will then be typed as Date in the Index function running on the client, while they have actually been converted to a string by Remix (I think that's what the Serialize* types are supposed to handle). But yeah, in this case it seems to work.

estyrke avatar Jun 30 '23 11:06 estyrke