Skip to content

Commit 3e6563e

Browse files
committed
docs: update other docs
1 parent 27acb3f commit 3e6563e

File tree

1 file changed

+1
-156
lines changed

1 file changed

+1
-156
lines changed

docs/other/swagger-codegen.md

Lines changed: 1 addition & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -4,161 +4,6 @@
44

55
This project is based on [`swagger-typescript-api`](https://github.com/acacode/swagger-typescript-api)
66

7+
Site: https://js2me.github.io/mobx-tanstack-query-api
78
Github: https://github.com/js2me/mobx-tanstack-query-api
89
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

Comments
 (0)