SvelteKit GraphQL Type Generation

💫 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 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"

1. Let's start by installing the packages we need. The main package is graphql-codegen-svelte-apollo. The official docs recommend installing the graphql dependency, 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
   

2. Next we need to create a codegen.json config 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-apollo plugin to the config manually. Instead, because we need to add authorisation credentials to the config, we will create it manually here. Create the codegen.json file in the project's root directory and paste in the following content:
   

   {
   "overwrite": true,
   "schema": {
   "https://swop.cx/graphql": {
     "headers": {
       "Authorization": "ApiKey ${SWOP_API_KEY}"
     }
   }
   },
   "generates": {
   "src/lib/generated/graphql.ts": {
     "plugins": ["typescript", "typescript-operations", "graphql-codegen-svelte-apollo"]
   }
   }
   }
   

   Notice in line 6 we 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 3–8 with "schema": "https://example.com/graphql",.
   
   
   You need to make sure SWOP_API_KEY is defined in your .env file.

3. We are almost done. Next we need to add a new generation script to package.json:
   

   "scripts": {
   "dev": "svelte-kit dev -p 3030",
   "build": "svelte-kit build",
   "preview": "svelte-kit preview -p 3030",
   "check": "svelte-check --tsconfig ./tsconfig.json",
   "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
   "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
   "prettier:check": "prettier --check --plugin-search-dir=. .",
   "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
   "gen": "export $(grep SWOP_API_KEY .env | xargs) && graphql-codegen --config codegen.json && prettier --write src/lib/generated/graphql.ts"
   },
   

   Conveniently this is doing three things for us. First it reads the API key from the .env file, 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.

4. 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.ts for 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 type keyword, wherever you import one of these new types. For example:
   

       import type { Query, QueryLatestArgs } from '$lib/generated/graphql';
   

🖥 Refactor

Let's quickly refactor the previous code, making use of the types. Edit src/routes/query/fx-rates.ts:

import type { Query, QueryLatestArgs } from '$lib/generated/graphql';
import type { Request } from '@sveltejs/kit';

export async function post(
  request: Request & { body: { currencies: string[] } }
): Promise<{ body: string } | { error: string; status: number }> {
  try {
    const { currencies = ['CAD', 'GBP', 'IDR', 'INR', 'USD'] } = request.body;

    const query = `
      query latestQuery(
        $baseCurrency: String = "EUR"
        $quoteCurrencies: [String!]
      ) {
        latest(
          baseCurrency: $baseCurrency
          quoteCurrencies: $quoteCurrencies
        ) {
          baseCurrency
          quoteCurrency
          date
          quote
        }
      }
    `;

    const variables: QueryLatestArgs = {
      baseCurrency: 'EUR',
      quoteCurrencies: currencies
    };

    const response = await fetch('https://swop.cx/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `ApiKey ${process.env['SWOP_API_KEY']}`
      },
      body: JSON.stringify({
        query,
        variables
      })
    });
    const data: { data: Query } = await response.json();

    return {
      body: JSON.stringify({ ...data })
    };
  } catch (err) {
    const error = `Error in /query/fx-rates.json.ts: ${err}`;
    console.error(error);
    return {
      status: 500,
      error
    };
  }
}

Then finally, we can refactor src/routes/index.svelte:

  <script lang="ts">
  import '@fontsource/source-sans-pro';
  import rates from '$lib/shared/stores/rates';
  import type { Query } from '$lib/generated/graphql';

  export let data: Query;
  rates.set(data.latest);
  let newCurrency = '';
  let submitting = false;

  async function handleSubmit() {
    try {
      submitting = true;
      const response = await fetch('/query/fx-rates.json', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ currencies: [newCurrency] })
      });
      const responseData: { data: Query } = await response.json();
      const rate = responseData.data.latest[0];
      submitting = false;
      rates.set([...$rates, rate]);
      newCurrency = '';
    } catch (error) {
      console.error(`Error in handleSubmit function on /: ${error}`);
    }
  }
</script>

🙌🏽 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!

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.

Comments

[Denis Donici]

Good stuff. Is there a public repo I could have a peek at?