Supabase React Query Codegen 🚀

A CLI tool to automatically generate React Query hooks and TypeScript types for your Supabase Database, streamlining data fetching and enhancing developer productivity.

Table of Contents 📚

• Features ⭐️
• Installation 📥
• Usage 🛠️
• Generated Types 🚧
• Generated Hooks 🔍
• Contributing 🤝
• License 📜

Features ⭐️

• Automatically generates TypeScript types and React Query hooks for your Supabase database.
• Reduces manual work and the likelihood of errors.
• Increases developer productivity by providing ready-to-use hooks for fetching data.

Installation 📥

Install the package globally using npm:

npm install -g supabase-react-query-codegen

Or with Yarn:

yarn global add supabase-react-query-codegen

Usage 🛠️

1. First, generate a TypeScript types file for your Supabase database (if you haven't already):

supabase gen types typescript --project-id "<your-project-id>" --schema public > path/to/types.ts

2. Create a supabase-react-query-codegen.config.json file with the following properties:

{
  // required
  "outputPath": "src/generated.ts", // path where generated code will go
  "typesPath": "src/types.ts", // path to your types file generated in step 1

  // optional
  "prettierConfigPath": ".prettierrc", // path to your .prettierrc file
  "relativeSupabasePath": "./supabase", // where your supabase client is relative to your generated file
  "supabaseExportName": "supabase", // if not supplied, default will be imported in your generated file
}

3. Run the generate command, passing in the required arguments:

npx supabase-react-query-codegen generate supabase-react-query-codegen.config.json

Generated Types 🚧

For convenience this tool also generates types from your Database schema. The following types will be generated for each table in your database, if you have a table called todo_items then you will get these types:

• TodoItem
• AddTodoItemRequest
• UpdateTodoItemRequest

Alternatives 🔄

This project has been developed in collaboration with the Better Supabase Types CLI tool made by FroggyPanda. If you don't use React Query but like the types generation part of this tool, it may be worth checking them out! ❤️

Generated Hooks 🔍

The following hooks will be generated for each table in your database, if you have a table called todo_items then you will get these hooks:

• useGetTodoItem: Fetch a single row by its ID.
• useGetAllTodoItems: Fetch all rows in the table.
• useAddTodoItem: Add a new row to the table.
• useUpdateTodoItem: Update an existing row in the table.
• useDeleteTodoItem: Delete a row from the table by its ID.

Note that todo_items is converted to PascalCase in the hook names.

Contributing 🤝

Contributions are welcome! If you find a bug or have a feature request, please open an issue on the GitHub repository. If you'd like to contribute code, feel free to fork the repository and submit a pull request.

Contributors 👥

Get yourself added to this list by helping me out wherever you can!

• @BarryMichaelDoyle (Founder)
• @FroggyPanda (Collaborator)
• @pntrivedy (Collaborator)
• @MegsSwanepoel (Banner Design)
• @SirGoaty (Research and Testing)
• @WagnerA117 (Research and Testing)

License 📜

MIT