💫 GraphQL with TypeScript and SvelteKit
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 autocompletions 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.
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 authorisation 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 the packages we need. The main package is
graphql-codegen-svelte-apollo. The official docs recommend installing the
graphqldependency, though I was getting a version conflict when I did install it and it seems to work well without:
- Next we need to create a
codegen.jsonconfig file. You can generate this automatically (by running
pnpx grapql-codegen init) if you have a basic use case, though you will still probably need to add the
graphql-codegen-svelte-apolloplugin to the config manually. Instead, because we need to add authorisation credentials to the config, we will create it manually here. Create the
codegen.jsonfile in the project's root directory and paste in the following content:Notice in line
6we include an authorisation header, which will contain our credentials for the API. If you are using another API which does not need credentials, just replace lines
You need to make sure
SWOP_API_KEYis defined in your
- We are almost done. Next we need to add a new generation script to
package.json:Conveniently this is doing three things for us. First it reads the API key from the
.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 to
src/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. Take 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 the
typekeyword, wherever you import one of these new types. For example:
Let's quickly refactor the previous code, making use of the types. Edit
Then finally, we can refactor
🙌🏽 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 authorisation headers,
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!
🙏🏽 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.