[typescript-urql-svelte] New Codegen Plugin Request

[trevyn]

The existing typescript-urql plugin is specific to React, and Svelte is awesome. I have @urql/svelte up and running, and would love to see a typescript-urql-svelte plugin for it.

As of today, the Svelte repo has 41.4k stars, so it should be around a while. :)

[ardatan]

@trevyn That sounds great! Would you start with a draft PR to help us? We don't know much about Svelte.

[trevyn]

Sure, I'll take a look. For now, here's my quick-and-dirty @urql/svelte impl. I honestly am not sure about the TypeScript part yet, but I'll keep this thread updated and submit a draft PR if I figure out a sensible plugin. :)

[trevyn]

Ok, I did a reasonable draft of what the codegen output could look like, and verified it works:

App.svelte (usage)
graphql_ops.svelte (would be codegen'd)

This is just in straight JS, I'll need to add TypeScript.

I also looked at the plugin code for typescript-urql to understand how to actually make the plugin. It looks OK, so I'll probably do that over the next few days. (Unless this is already enough, and you have someone that wants to take it on?)

[dotansimha]

Moving to Discussions :)

[kitten]

Wouldn't it be more interesting here to promote TypedDocumentNode as the "preferred" solution across the board? It's supported in more cases (like methods on the Client), it is framework-agnostic, and it supports inferred types that are as good as with generated utilities (or in the case of React/Preact, generated wrapper hooks)

[dotansimha]

I'm totally agree with that, and we are still aiming to promote TypedDocumentNode as the ideal usage :)

[trevyn]

Oh man, I totally missed that.

For anyone else wanting to use TypeScript + urql + Svelte + codegen, just use the typed-document-node plugin, and you can pass that straight to @urql/svelte:

<script lang="ts">
 import * as gql from "./your-codegenned-file";  // .ts
 import { operationStore, query } from "@urql/svelte";

 const listCards = query(operationStore(gql.ListCardsDocument));
</script>

See also: https://the-guild.dev/blog/typed-document-node