💫 GraphQL with TypeScript and SvelteKit #
In this post, we look at how you can do automatic SvelteKit GraphQL type generation. If that means nothing, read on and hopefully, by the end it makes sense! TypeScript builds on JavaScript to add variable types (like you see in Rust, C++ or Java), making it easier to spot mistakes in your code. Adding types to TypesScript code can get old quickly! GraphQL is a typed language, which means you just have to reference the GraphQL schema in the right way to be able to generate types automatically for your TypeScript code base.
Using the graphql-codegen tool, we will see how
you can generate a single file containing all the types from the GraphQL API
you are using. Then, when you run a query, you will just need to import the type
from that file. If you already use TypeScript you know that can save you a lot
of time. We'll get autocompletion and all the other benefits of using TypeScript.
🧱 What are we Building? #
This post follows on from a recent post on SvelteKit GraphQL queries using fetch only. However, you can use you the same tool we describe if you are working in Apollo Client on your SvelteKit site.
Please enable JavaScript to watch the video 📼
Rather than build a new site, we will carry on with the site from the post on SvelteKit queries using fetch only. In that post, we queried a public GraphQL API to get up-to-date currency exchange rates. We will use the site built there as a starting point and see how you can generate TypeScript types using codegen even when your API needs authorization credentials. If that sounds exciting, then let's crack on!
🧑🏽🎓 How to Generate Types in SvelteKit using a GraphQL API #
Let's work through the steps to generate our types and then use them in our code to check all is well. We are using the earlier mentioned post as a staring point, though the instructions will be similar for another existing project. So follow along with your own project if you prefer.
SvelteKit GraphQL Type Generation #
-
Let’s start by installing packages. The main package is
graphql-codegen-svelte-apollo. The official docs recommend installing thegraphqldependency, though I was getting a version conflict when I did install it, and it seems to work well without:pnpm install -D graphql-codegen-svelte-apollo \@graphql-codegen/cli @graphql-codegen/typescript \@graphql-codegen/typescript-operations -
Next, we need to create a
codegen.jsonconfig file. You can generate this automatically (by runningpnpm exec grapql-codegen init) if you have a basic use case, though you will still probably need to add thegraphql-codegen-svelte-apolloplugin to the config manually. Instead, because we need to add authorization credentials to the config, we will create it manually here. Create thecodegen.jsonfile in the project's root directory and paste in the following content:6we include an authorization header, which will contain our credentials for the API. If you are using another API which does not need credentials, just replace lines3–8with"schema": "https://example.com/graphql".
You need to make sureSWOP_API_KEYis defined in your.envfile. -
We are almost done. Next, we need to add a new generation script to
package.json:.envfile, making it available in the next step. I have tested this on macOS. I would expect it to work on Linux and other UNIX-based systems. I'm not sure how to do this on Windows. Please drop comments below if you are using Linux/Unix or Windows and get it to work, so I can update. Secondly, we actually generate the types, output tosrc/lib/generated/graphql.ts. Finally, we format the types file with prettier — this saves doing it manually, before committing your code. Change the codegen file name if you generated a YAML file automatically in the previous step. -
All that is left to do is to start using the new types, testing
everything is working. We'll look at that below. Have a look at the new
types generated in
src/lib/generated/graphql.tsfor now. You will see there are some missing dependencies, but if you are only using this file for types, you can ignore them. Just import using thetypekeyword, wherever you import one of these new types. For example:import type { Query, QueryLatestArgs } from '$lib/generated/graphql';
🗳 Poll #
🖥 Refactor #
Let’s quickly refactor the previous code, making use of the types. Edit src/routes/query/fx-rates.ts:
1 import { SWOP_API_KEY } from '$env/static/private';2 import type { Query, QueryLatestArgs } from '$lib/generated/graphql';3 import { error } from '@sveltejs/kit';4 import { print } from 'graphql';5 import gql from 'graphql-tag';6 import type { Actions, PageServerLoad } from './$types';78 export async function post({ request }: { request: Request }): Promise<ReturnType<RequestHandler>> {9 try {10 const { currencies = ['CAD', 'GBP', 'IDR', 'INR', 'USD'] } = (await request.json()) as {11 currencies: string[];12 };1314 const query = print(gql`15 query latestQuery($baseCurrency: String = "EUR", $quoteCurrencies: [String!]) {16 latest(baseCurrency: $baseCurrency, quoteCurrencies: $quoteCurrencies) {17 baseCurrency18 quoteCurrency19 date20 quote21 }22 }23 `);2425 const variables: QueryLatestArgs = {26 baseCurrency: 'EUR',27 quoteCurrencies: currencies28 };2930 const response = await fetch('https://swop.cx/graphql', {31 method: 'POST',32 headers: {33 'Content-Type': 'application/json',34 Authorization: `ApiKey ${process.env['SWOP_API_KEY']}`35 },36 body: JSON.stringify({37 query,38 variables39 })40 });41 const data: { data: Query } = await response.json();4243 return {44 body: JSON.stringify({ ...data })45 };46 } catch (err) {47 const error = `Error in /query/fx-rates.json.ts: ${err}`;48 console.error(error);49 return {50 status: 500,51 body: error52 };53 }54 }
For syntax highlighting, we wrapped the query in a gql tag. Although that gives us the highlighting, it changes the type, and we need
the query as a string to pass to the API. To convert it back to a string, we use
the print function imported from graphql. You can get syntax highlighting on gql tags
(in VS Code) by installing the VS Code GraphQL Extension . Thanks to Mário Monteiro for the tip.
Then finally, we can refactor src/routes/index.svelte:
21 <script lang="ts">22 import '@fontsource/source-sans-pro';23 import rates from '$lib/shared/stores/rates';24 import type { Query } from '$lib/generated/graphql';2526 export let data: Query;27 rates.set(data.latest);28 let newCurrency = '';29 let submitting = false;3031 async function handleSubmit() {32 try {33 submitting = true;34 const response = await fetch('/query/fx-rates.json', {35 method: 'POST',36 credentials: 'same-origin',37 headers: {38 'Content-Type': 'application/json'39 },40 body: JSON.stringify({ currencies: [newCurrency] })41 });42 const responseData: { data: Query } = await response.json();43 const rate = responseData.data.latest[0];44 submitting = false;45 rates.set([...$rates, rate]);46 newCurrency = '';47 } catch (error) {48 console.error(`Error in handleSubmit function on /: ${error}`);49 }50 }51 </script>
Please enable JavaScript to watch the video 📼
🙌🏽 SvelteKit GraphQL Type Generation: What we Learned #
In this post, we learned:
- how to generate TypeScript types automatically from a GraphQL API endpoint;
- configuring graphql-codegen to use HTTP authorization headers; and
- how to use environment variable with graphql-codegen.
I do hope there is at least one thing in this article which you can use in your work or a side project. As always, get in touch with feedback if I have missed a trick somewhere!
You can see the full code for this SvelteKit GraphQL queries using fetch project on the Rodney Lab Git Hub repo .
🙏🏽 SvelteKit GraphQL Type Generation: Feedback #
Have you found the post useful? Do you have your own methods for solving this problem? Let me know your solution. Would you like to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.