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
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 authorization credentials. If that sounds exciting, then let's crack on!
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.
Let’s start by installing packages. 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
pnpm exec 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 authorization 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 authorization 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
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. 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 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
For syntax highlighting, we wrapped the query in a
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
graphql. You can get syntax highlighting
gql tags (in VSCode) by installing the VSCode GraphQL Extension . Thanks to Mário Monteiro for the tip.
Then finally, we can refactor
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!
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.