https://github.com/arn4v/tsrq
Generate type-safe React Query hooks without boilerplate
https://github.com/arn4v/tsrq
react react-hooks react-query typescript
Last synced: about 2 months ago
JSON representation
Generate type-safe React Query hooks without boilerplate
- Host: GitHub
- URL: https://github.com/arn4v/tsrq
- Owner: arn4v
- License: mit
- Created: 2021-09-30T15:07:10.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-03T21:47:17.000Z (over 4 years ago)
- Last Synced: 2025-05-21T05:11:39.584Z (about 1 year ago)
- Topics: react, react-hooks, react-query, typescript
- Language: TypeScript
- Homepage: https://npmjs.org/package/tsrq
- Size: 217 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
tsrq
- [Introduction](#introduction)
- [Install](#install)
- [Quick Start Example:](#quick-start-example)
- [API Reference](#api-reference)
- [Credits](#credits)
## Introduction
When using React Query, for the same query, you can either copy paste the code into different components or abstract it into a custom hook. The first one is just bad practice and the second method become unmanageable very quickly as your app (and # of endpoints) grows.
With TSRQ, you only define you write code for your queries and mutations once and reuse them wherever you want.
## Install
npm:
```bash
npm i -S tsrq react-query
```
yarn:
```bash
yarn add tsrq react-query
```
## Quick Start Example:
```tsx
import {
createQueryBuilder,
createUseQuery,
createUseMutation,
} from "typed-query";
interface ITodo {
id: string;
title: string;
}
const builder = createQueryBuilder()
.query("todos", async () => {
return await fetch("/todos").then(res => res.json() as Array);
})
.query("byId", async (id: string) => {
return await fetch(`/todos/${id}`).then(res => res.json() as ITodo);
})
.mutation("updateTodo", async ({ id, title }: ITodo) => {
return await fetch(`/todos/${id}`, {
method: "PATCH",
body: JSON.stringify({ title }),
}).then(res => res.json() as ITodo);
});
const useQuery = createUseQuery(builder);
const useMutation = createUseMutation(builder);
export default function TodosList() {
// If query requires no parameters then you must
// provide an empty array
const { data } = useQuery("todos", []);
return (
- {item.title}
{data?.map(item => (
))}
);
}
export default function TodoPage({ id }: { id: string }) {
// Provide query parameters as array in second arg
const { data } = useQuery("byId", [id]);
const { mutate } = useMutation("updateTodo");
return
}
```
## API Reference
- createQueryBuilder
Create instance:
```ts
import { createQueryBuilder } from "tsrq";
const builder = createQueryBuilder();
```
Add Query to Instance:
```ts
import { createQueryBuilder } from "tsrq";
const builder = createQueryBuilder().query("todos", () => {
return fetch("/todos").then(res => res.json());
});
```
Add Mutation to Instance:
```ts
import { createQueryBuilder } from "tsrq";
const builder = createQueryBuilder().mutation("add", (title: string) => {
return fetch("/todos", {
method: "POST",
body: JSON.stringify({
title,
}),
});
});
```
- createUseQuery
```ts
import { createQueryBuilder, createUseQuery } from "tsrq";
// Builder Code
const builder = createQueryBuilder();
// ...End Builder Code
export const useQuery = createUseQuery(builder);
```
Usage:
When query requires params:
```tsx
import * as React from "react";
import { useQuery } from "./tsrq.config";
const TodoPage = ({ id }: { id: string }) => {
const { data, isLoading } = useQuery("byId", [id]);
if (isLoading) return null;
return
};
```
When query doesn't require params:
```tsx
import * as React from "react";
import { useQuery } from "./tsrq.config";
export default function TodosList() {
// If query requires no parameters then you must
// provide an empty array
const { data } = useQuery("todos", []);
return (
- {item.title}
{data?.map(item => (
))}
);
}
```
- createUseMutation
```ts
import { createQueryBuilder, createUseMutation } from "tsrq";
// Builder Code
const builder = createQueryBuilder();
// ...End Builder Code
export const useMutation = createUseMutation(builder);
```
Usage:
```tsx
import * as React from "react";
import { useMutation } from "./tsrq.config";
const CreateTodoPage = () => {
const [title, setTitle] = React.useState("");
const { mutate } = useMutation("add");
const addTodo = () => {
mutate(title);
};
return
};
```
## Credits
- Alex Johansson (@katt) for tRPC. This library is heavily inspired by `trpc`. TSRQ QueryBuilder implementation is similar to TRPC's Router implementation.