diff --git a/web/docs/guides/api/generating-types.mdx b/web/docs/guides/api/generating-types.mdx index efd5319be52..865ae468091 100644 --- a/web/docs/guides/api/generating-types.mdx +++ b/web/docs/guides/api/generating-types.mdx @@ -4,10 +4,56 @@ title: "Generating Types" description: How to generate types for your API and Supabase libraries. --- +Supabase APIs are generated from your database, which means that we can use database introspection to generate type-safe API definitions. + +### Generating types from OpenAPI specification + +Supabase generates an OpenAPI specification file for your database which can be used to generate your data types for usage with TypeScript. + +The OpenAPI specification for your Supabase project can be accessed as follows: + +```txt +https://your-project.supabase.co/rest/v1/?apikey=your-anon-key +``` + +Using the open source [openapi-typescript](https://github.com/drwpow/openapi-typescript#%EF%B8%8F-reading-specs-from-remote-resource) tool you can generate your types and store them locally: + +```bash +npx openapi-typescript https://your-project.supabase.co/rest/v1/?apikey=your-anon-key --output types/supabase.ts +``` + +Important notes: + +- Since the generator uses JSON API, there is no way to determine if a column is an Array. It will generate array types as `string`, even though Supabase handles this automatically and returns arrays. + You can fix this manually in the files by changing the type, e.g. `names: string` -> `names: string[]` +- The types won't automatically stay in sync with your database, so make sure to regenerate your types after your make changes to your database. + +After you have generated your types, you can use them in your TypeScript projects: + +```ts +import { NextApiRequest, NextApiResponse } from "next"; +import { createClient } from "@supabase/supabase-js"; +import { definitions } from "../../types/supabase"; + +const supabase = createClient( + process.env.NEXT_PUBLIC_SUPABASE_URL, + process.env.SUPABASE_SECRET_KEY +); + +export default async (req: NextApiRequest, res: NextApiResponse) => { + const allOnlineUsers = await supabase + .from("users") + .select("*") + .eq("status", "ONLINE"); + res.status(200).json(allOnlineUsers); +}; +``` + +For more advance type-support, check out [`postgrest-js-tools`](https://github.com/mzalevski/postgrest-js-tools). + ## Update types automatically with GitHub Actions One way to keep your type definitions in sync with your database is to set up a GitHub action that runs on a schedule. -Supabase offers a Swagger OpenAPI specification for the REST data endpoint which you can use to generate definitions. The following script can be run in your terminal to produce the file `types/database/index.ts`. ``` @@ -20,7 +66,8 @@ You can add this script to your `package.json` and run it using `npm run update- "update-types": "npx openapi-typescript \"${SUPABASE_URL}/rest/v1/?apikey=${SUPABASE_ANON_KEY}\" --version=2 --output types/database/index.ts" ``` -You can use GitHub actions to generate this file automatically. Create a file `.github/workflows/update-types.yml` and add the following snippet into this file to define the action along with the environment variables. If there is a change to your definitions, this script will commit the change to your repo. +You can use GitHub actions to generate this file automatically. This script will commit the change to your repo every night. +Create a file `.github/workflows/update-types.yml` and add the following snippet into this file to define the action along with the environment variables. ```yml name: Update database types @@ -68,4 +115,4 @@ Alternatively, you can use a community-supported GitHub action: [generate-supaba ## Resources -- [How to create and test a GitHub Action that generates Supabase database types](https://blog.esteetey.dev/how-to-create-and-test-a-github-action-that-generates-types-from-supabase-database) \ No newline at end of file +- [Generating Supabase types with GitHub Actions](https://blog.esteetey.dev/how-to-create-and-test-a-github-action-that-generates-types-from-supabase-database) \ No newline at end of file