@@ -21,16 +21,16 @@ layout:
21
21
22
22
In this guide you will learn how to:
23
23
24
- * [ Step 1: Install Packages] ( generate-typescript-interfaces.md#step-1-install-packages )
25
- * [ Step 2: Create ` codegen.ts ` ] ( generate-typescript-interfaces.md#step-2-create-codegen.ts )
26
- * [ Step 3: Modify ` package.json ` Scripts] ( generate-typescript-interfaces.md#step-3-modify-package.json-scripts )
27
- * [ Step 4: Mark All GraphQL Queries] ( generate-typescript-interfaces.md#step-4-mark-all-graphql-queries )
28
- * [ Step 5: Generate TypeScript Interfaces] ( generate-typescript-interfaces.md#step-5-generate-typescript-interfaces )
24
+ - [ Step 1: Install Packages] ( generate-typescript-interfaces.md#step-1-install-packages )
25
+ - [ Step 2: Create ` codegen.ts ` ] ( generate-typescript-interfaces.md#step-2-create-codegen.ts )
26
+ - [ Step 3: Modify ` package.json ` Scripts] ( generate-typescript-interfaces.md#step-3-modify-package.json-scripts )
27
+ - [ Step 4: Mark All GraphQL Queries] ( generate-typescript-interfaces.md#step-4-mark-all-graphql-queries )
28
+ - [ Step 5: Generate TypeScript Interfaces] ( generate-typescript-interfaces.md#step-5-generate-typescript-interfaces )
29
29
30
30
## Pre-requisites
31
31
32
- * An [ Airstack] ( https://airstack.xyz/ ) account (free)
33
- * Basic knowledge of GraphQL
32
+ - An [ Airstack] ( https://airstack.xyz/ ) account
33
+ - Basic knowledge of GraphQL
34
34
35
35
## Step 1: Install Packages
36
36
@@ -39,25 +39,31 @@ First, you need to install the required packages using your favorite package man
39
39
{% tabs %}
40
40
{% tab title="npm" %}
41
41
{% code overflow="wrap" %}
42
+
42
43
``` bash
43
44
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @parcel/watcher
44
45
```
46
+
45
47
{% endcode %}
46
48
{% endtab %}
47
49
48
50
{% tab title="yarn" %}
49
51
{% code overflow="wrap" %}
52
+
50
53
``` bash
51
54
yarn add --dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @parcel/watcher
52
55
```
56
+
53
57
{% endcode %}
54
58
{% endtab %}
55
59
56
60
{% tab title="pnpm" %}
57
61
{% code overflow="wrap" %}
62
+
58
63
``` bash
59
64
pnpm install --dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @parcel/watcher
60
65
```
66
+
61
67
{% endcode %}
62
68
{% endtab %}
63
69
{% endtabs %}
@@ -97,17 +103,19 @@ Here, the types will be compiled and outputted in a single file `src/graphql/typ
97
103
Once you have the ` codegen.ts ` file ready, add the following scripts to your project's ` package.json ` :
98
104
99
105
{% code title="package.json" %}
106
+
100
107
``` json
101
108
{
102
109
"scripts" : {
103
110
"generate" : " npx graphql-codegen" ,
104
111
"prestart" : " yarn generate" ,
105
- "predev" : " yarn generate" ,
112
+ "predev" : " yarn generate"
106
113
// Other scripts
107
- },
114
+ }
108
115
// ...
109
116
}
110
117
```
118
+
111
119
{% endcode %}
112
120
113
121
Here, you'll have 3 new scripts:
@@ -123,7 +131,7 @@ Optionally, you can also run the `generate` script concurrently in **watch mode*
123
131
"scripts" : {
124
132
"dev" : " concurrently \" vite\" \" yarn generate --watch\" "
125
133
// Other scripts
126
- },
134
+ }
127
135
// ...
128
136
}
129
137
```
@@ -139,9 +147,9 @@ Keep in mind to have the name of each query **UNIQUE** to each other as TypeScri
139
147
140
148
For example, the query below has name ` FetchWeb3Identity ` . Therefore, the types generated will be:
141
149
142
- * ` FetchWeb3IdentityQuery ` : response data type interface
143
- * ` FetchWeb3IdentityVariables ` : variable type interface
144
- {% endhint %}
150
+ - ` FetchWeb3IdentityQuery ` : response data type interface
151
+ - ` FetchWeb3IdentityVariables ` : variable type interface
152
+ {% endhint %}
145
153
146
154
``` typescript
147
155
const query = /* GraphQL */ `
@@ -163,21 +171,27 @@ Finally, you can run the `generate` scripts to generate the necessary typescript
163
171
164
172
{% tabs %}
165
173
{% tab title="npm" %}
174
+
166
175
``` bash
167
176
npm run generate
168
177
```
178
+
169
179
{% endtab %}
170
180
171
181
{% tab title="yarn" %}
182
+
172
183
``` bash
173
184
yarn generate
174
185
```
186
+
175
187
{% endtab %}
176
188
177
189
{% tab title="pnpm" %}
190
+
178
191
``` bash
179
192
pnpm run generate
180
193
```
194
+
181
195
{% endtab %}
182
196
{% endtabs %}
183
197
@@ -187,6 +201,7 @@ From `src/graphql/types.ts`, you can import all the necessary types for your Air
187
201
188
202
{% tabs %}
189
203
{% tab title="Vanilla (TS)" %}
204
+
190
205
``` typescript
191
206
import { fetchQuery } from " @airstack/airstack-react" ;
192
207
import { FetchWeb3IdentityQuery } from " ./src/graphql/types" ;
@@ -197,21 +212,28 @@ const { data, loading, error } = fetchQuery<FetchWeb3IdentityQuery>(
197
212
{ cache: false }
198
213
);
199
214
```
215
+
200
216
{% endtab %}
201
217
202
218
{% tab title="React (TS)" %}
219
+
203
220
``` tsx
204
221
import { useQuery } from " @airstack/airstack-react" ;
205
- import { FetchWeb3IdentityQuery , FetchWeb3IdentityVariables } from " ./src/graphql/types" ;
222
+ import {
223
+ FetchWeb3IdentityQuery ,
224
+ FetchWeb3IdentityVariables ,
225
+ } from " ./src/graphql/types" ;
206
226
207
227
const { data, loading, error } = useQuery <
208
228
FetchWeb3IdentityQuery ,
209
229
FetchWeb3IdentityVariables
210
230
> (query , {}, { cache: false });
211
231
```
232
+
212
233
{% endtab %}
213
234
214
235
{% tab title="Node (TS)" %}
236
+
215
237
``` typescript
216
238
import { fetchQuery } from " @airstack/node" ;
217
239
import { FetchWeb3IdentityQuery } from " ./src/graphql/types" ;
@@ -225,46 +247,49 @@ interface Error {
225
247
message: string ;
226
248
}
227
249
228
- const { data, error }: QueryResponse = fetchQuery (
229
- query ,
230
- {},
231
- { cache: false }
232
- );
250
+ const { data, error }: QueryResponse = fetchQuery (query , {}, { cache: false });
233
251
```
252
+
234
253
{% endtab %}
235
254
{% endtabs %}
236
255
237
256
Alternatively, if you added ** watch** mode to run concurrently with your development or production build script, you can simply run those scripts and the types will be generated upon development or build time.
238
257
239
258
{% tabs %}
240
259
{% tab title="npm" %}
260
+
241
261
``` bash
242
262
# For development
243
263
npm run dev
244
264
245
265
# For production build
246
266
npm run build
247
267
```
268
+
248
269
{% endtab %}
249
270
250
271
{% tab title="yarn" %}
272
+
251
273
``` bash
252
274
# For development
253
275
yarn dev
254
276
255
277
# For production build
256
278
yarn build
257
279
```
280
+
258
281
{% endtab %}
259
282
260
283
{% tab title="pnpm" %}
284
+
261
285
``` bash
262
286
# For development
263
287
pnpm run dev
264
288
265
289
# For production build
266
290
pnpm run build
267
291
```
292
+
268
293
{% endtab %}
269
294
{% endtabs %}
270
295
@@ -274,10 +299,10 @@ If you have any questions or need help regarding generating TypeScript interface
274
299
275
300
### More Resources
276
301
277
- * [ API Overview] ( ../../api-references/overview/ )
278
- * [ API References] ( ../../api-references/api-reference/ )
279
- * [ Variables] ( ../../web-sdk-reference/objects/variables.md )
280
- * [ Pagination] ( pagination-in-airstack-sdk.md )
281
- * [ Direct API Call] ( ../../get-started/quickstart/direct-api-call.md )
282
- * [ Multiple Queries Execution] ( multiple-queries-execution.md )
283
- * [ Cross Chain Queries] ( cross-chain-queries.md )
302
+ - [ API Overview] ( ../../api-references/overview/ )
303
+ - [ API References] ( ../../api-references/api-reference/ )
304
+ - [ Variables] ( ../../web-sdk-reference/objects/variables.md )
305
+ - [ Pagination] ( pagination-in-airstack-sdk.md )
306
+ - [ Direct API Call] ( ../../get-started/quickstart/direct-api-call.md )
307
+ - [ Multiple Queries Execution] ( multiple-queries-execution.md )
308
+ - [ Cross Chain Queries] ( cross-chain-queries.md )
0 commit comments