|
4 | 4 |
|
5 | 5 | This project is based on [`swagger-typescript-api`](https://github.com/acacode/swagger-typescript-api) |
6 | 6 |
|
| 7 | +Site: https://js2me.github.io/mobx-tanstack-query-api |
7 | 8 | Github: https://github.com/js2me/mobx-tanstack-query-api |
8 | 9 | NPM: http://npmjs.org/package/mobx-tanstack-query-api |
9 | | - |
10 | | -::: warning |
11 | | -Currently `mobx-tanstack-query-api` is a WIP project. |
12 | | -This is not production ready. |
13 | | -::: |
14 | | - |
15 | | -### Steps to use |
16 | | - |
17 | | -#### Install |
18 | | - |
19 | | -::: code-group |
20 | | - |
21 | | -```bash [npm] |
22 | | -npm install mobx-tanstack-query-api |
23 | | -``` |
24 | | - |
25 | | -```bash [pnpm] |
26 | | -pnpm add mobx-tanstack-query-api |
27 | | -``` |
28 | | - |
29 | | -```bash [yarn] |
30 | | -yarn add mobx-tanstack-query-api |
31 | | -``` |
32 | | - |
33 | | -::: |
34 | | - |
35 | | -#### Create configuration file |
36 | | - |
37 | | -Create a codegen configuration file with file name `api-codegen.config.(js|mjs)` at root of your project. |
38 | | -Add configuration using `defineConfig` |
39 | | - |
40 | | -```ts |
41 | | -import { defineConfig } from "mobx-tanstack-query-api/cli"; |
42 | | -import { fileURLToPath } from "url"; |
43 | | -import path from "path"; |
44 | | - |
45 | | -const __filename = fileURLToPath(import.meta.url); |
46 | | -const __dirname = path.dirname(__filename); |
47 | | - |
48 | | -export default defineConfig({ |
49 | | - // input: path.resolve(__dirname, './openapi.yaml'), |
50 | | - input: "http://yourapi.com/url/openapi.yaml", |
51 | | - output: path.resolve(__dirname, "src/shared/api/__generated__"), |
52 | | - httpClient: "builtin", |
53 | | - queryClient: "builtin", |
54 | | - endpoint: "builtin", |
55 | | - // namespace: 'collectedName', |
56 | | - groupBy: "tag", |
57 | | - // groupBy: 'tag-1', |
58 | | - // groupBy: 'path-segment', |
59 | | - // groupBy: 'path-segment-1', |
60 | | - filterEndpoints: () => true, |
61 | | - // groupBy: route => { |
62 | | - // const api = apis.find(api => api.urls.some(url => route.raw.route.startsWith(url))) |
63 | | - // return api?.name ?? 'other' |
64 | | - // }, |
65 | | - formatExportGroupName: (groupName) => `${groupName}Api`, |
66 | | -}); |
67 | | -``` |
68 | | - |
69 | | -#### Add script to `package.json` |
70 | | - |
71 | | -```json |
72 | | -... |
73 | | -"scripts": { |
74 | | - ... |
75 | | - "dev:api-codegen": "mobx-tanstack-query-api" |
76 | | - ... |
77 | | -} |
78 | | -... |
79 | | -``` |
80 | | - |
81 | | -#### Run codegen |
82 | | - |
83 | | -::: code-group |
84 | | - |
85 | | -```bash [npm] |
86 | | -npm run dev:api-codegen |
87 | | -``` |
88 | | - |
89 | | -```bash [pnpm] |
90 | | -pnpm dev:api-codegen |
91 | | -``` |
92 | | - |
93 | | -```bash [yarn] |
94 | | -yarn dev:api-codegen |
95 | | -``` |
96 | | - |
97 | | -::: |
98 | | - |
99 | | -#### Use queries and mutations |
100 | | - |
101 | | -```ts |
102 | | -import { getFruits, createFruit, Tag } from "@/shared/api/__generated__"; |
103 | | - |
104 | | -export const fruitsQuery = getFruits.toQuery({ |
105 | | - enableOnDemand: true, |
106 | | - params: {}, |
107 | | -}); |
108 | | - |
109 | | -export const fruitCreateMutation = createFruit.toMutation({ |
110 | | - invalidateEndpoints: { |
111 | | - tag: [Tag.Fruits], |
112 | | - }, |
113 | | -}); |
114 | | -``` |
115 | | - |
116 | | -Another example with classes |
117 | | - |
118 | | -```ts |
119 | | -import { getFruits } from "@/shared/api/__generated__"; |
120 | | - |
121 | | -export class Fruits { |
122 | | - private abortController = new AbortController(); |
123 | | - |
124 | | - @observable |
125 | | - private accessor params = { |
126 | | - search: "", |
127 | | - }; |
128 | | - |
129 | | - private fruitsQuery = getFruits.toQuery({ |
130 | | - abortSignal: this.abortController.signal, |
131 | | - enableOnDemand: true, |
132 | | - params: () => ({ |
133 | | - query: { |
134 | | - search: this.params.search, |
135 | | - }, |
136 | | - }), |
137 | | - }); |
138 | | - |
139 | | - constructor(abortSignal?: AbortSignal) { |
140 | | - // or you can use linked-abort-controller package |
141 | | - abortSignal.addEventListener("abort", () => { |
142 | | - this.abortController.abort(); |
143 | | - }); |
144 | | - } |
145 | | - |
146 | | - @computed.struct |
147 | | - get data() { |
148 | | - return this.fruitsQuery.data || []; |
149 | | - } |
150 | | - |
151 | | - @computed.struct |
152 | | - get isLoading() { |
153 | | - return this.fruitsQuery.isLoading; |
154 | | - } |
155 | | - |
156 | | - destroy() { |
157 | | - this.abortController.abort(); |
158 | | - } |
159 | | -} |
160 | | - |
161 | | -const fruits = new FruitsModel(); |
162 | | - |
163 | | -console.log(fruits.data); // enable query |
164 | | -``` |
0 commit comments