You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -71,9 +71,21 @@ For a complete list of rules with code examples, please look at our GraphQL Vali
71
71
72
72
GraphQL is a language and set of conventions that transport over HTTP.
73
73
74
-
It means that you can query a GraphQL API using standard `fetch` (natively or via `cross-undici-fetch` or `isomorphic-fetch`) as follows:
74
+
It means that you can query a GraphQL API using standard `fetch` (natively or via `@whatwg-node/fetch` or `isomorphic-fetch`).
75
+
76
+
However, as stated in ["Querying from an Application"](/querying/querying-from-an-application), we recommend you to use our `graph-client` that supports unique features such as:
77
+
- Cross-chain Subgraph Handling: Querying from multiple subgraphs in a single query
Another lightweight alternative, best for back-end use-cases, is the famous [`graphql-request` library](https://github.com/prisma-labs/graphql-request).
96
-
97
-
This lightweight GraphQL client comes with the essential features to query a GraphQL API:
98
-
99
-
- Mutations validation
100
-
- Support for file upload
101
-
- Batching
102
-
- Promise-based API
103
-
- TypeScript support
104
-
105
-
<br />
106
-
107
-
A complete GraphQL client is [URQL](https://formidable.com/open-source/urql/) which is available within Node.js, React/Preact, Vue, Svelte environments, with more advanced features:
108
-
109
-
- Flexible cache system
110
-
- Extensible design (easing adding new capabilities on top of it)
111
-
- Lightweight bundle (~5x lighter than Apollo Client)
112
-
- Support for file uploads and offline mode
113
-
114
-
<br />
115
-
116
-
In the React ecosystem, [React Query](https://react-query.tanstack.com/graphql) brings a lightweight and agnostic solution for GraphQL.
117
-
118
-
React Query is a great candidate if you are looking for an easy-to-use and lightweight multipurpose client (GraphQL-capable) that provides essential features such as:
Finally, Apollo Client is the ubiquitous GraphQL client on the front-end ecosystem.
99
+
asyncfunction main() {
100
+
const result =awaitexecute(query, variables)
101
+
// `result` is fully typed!
102
+
console.log(result)
103
+
}
128
104
129
-
Available for React, Angular, Vue, Ember, iOS, and Android, Apollo Client, although the heaviest clients, brings many features to build advanced UI on-top of GraphQL:
105
+
main()
106
+
```
130
107
131
-
- advanced error handling
132
-
- pagination
133
-
- data prefetching
134
-
- optimistic UI
135
-
- local state management
108
+
More GraphQL client alternatives are covered in ["Querying from an Application"](/querying/querying-from-an-application).
136
109
137
110
<br />
138
111
@@ -503,69 +476,3 @@ The [JS GraphQL plugin](https://plugins.jetbrains.com/plugin/8097-graphql/) will
503
476
- snippets
504
477
505
478
More information on this [WebStorm article](https://blog.jetbrains.com/webstorm/2019/04/featured-plugin-js-graphql/) that showcases all the plugin's main features.
506
-
507
-
<br />
508
-
509
-
### TypeScript types generation
510
-
511
-
Finally, the best GraphQL experience is reached when the TypeScript data types are generated from the defined GraphQL queries, as follows:
Such a setup can be easily achieved by installing and configuring [GraphQL Code Generator](https://www.graphql-code-generator.com/docs/getting-started) as follows:
Then update your `package.json` (or similar script configuration setup) as follows:
543
-
544
-
```tsx
545
-
{
546
-
// ...
547
-
"scripts": {
548
-
// ...
549
-
"generate": "graphql-codegen",
550
-
// ...
551
-
}
552
-
// ...
553
-
}
554
-
```
555
-
556
-
Add the following configuration file to your project:
557
-
558
-
```tsx
559
-
schema: "<SUBGRAPH_URL>"
560
-
documents: './src/**/*.ts'
561
-
generates:
562
-
./generated.ts:
563
-
plugins:
564
-
-typescript
565
-
-typescript-operations
566
-
```
567
-
568
-
Finally, by simply running the configured script (`yarn generate`), GraphQL Code Generator will generate the proper TypeScript types in the `generated.ts` file:
569
-
570
-
- Each query will get a corresponding `[QueryName]Query` type (ex: `GetToken` → `GetTokenQuery` type
571
-
- Each fragment will get a corresponding `[FragmentName]Fragment` type (ex: `DelegateItem` → `DelegateItemFragment` type
Also integrated with popular GraphQL clients such as Apollo and URQL and compatible with all environments (React, Angular, Node.js, React Native), using `graph-client` will give you the best experience for interacting with The Graph.
39
+
40
+
<br />
41
+
42
+
Let's look at how to fetch data from a subgraph with `graphql-client`.
43
+
44
+
To get started, make sure to install The Graph Client CLI in your project:
45
+
46
+
```sh
47
+
yarn add -D @graphprotocol/client-cli
48
+
# or, with NPM:
49
+
npm install --save-dev @graphprotocol/client-cli
50
+
```
51
+
52
+
Define you query in a `.graphql` file (or inlined in your `.js` or `.ts` file):
`graph-client` is perfectly integrated with other GraphQL clients such as Apollo client, URQL, or React Query; you will [find examples in the official repository](https://github.com/graphprotocol/graph-client/tree/main/examples).
147
+
148
+
However, if you choose to go with another client, keep in mind that **you won't be able to get to use Cross-chain Subgraph Handling or Automatic Pagination, which are core features for querying The Graph**.
149
+
150
+
<br />
151
+
25
152
### Apollo client
26
153
27
-
[Apollo client](https://www.apollographql.com/docs/) supports web projects, including frameworks like React and Vue, as well as mobile clients like iOS, Android, and React Native.
154
+
[Apollo client](https://www.apollographql.com/docs/) is the ubiquitous GraphQL client on the front-end ecosystem.
155
+
156
+
Available for React, Angular, Vue, Ember, iOS, and Android, Apollo Client, although the heaviest client, brings many features to build advanced UI on top of GraphQL:
157
+
158
+
- advanced error handling
159
+
- pagination
160
+
- data prefetching
161
+
- optimistic UI
162
+
- local state management
163
+
164
+
<br />
28
165
29
166
Let's look at how to fetch data from a subgraph with Apollo client in a web project.
30
167
@@ -98,9 +235,18 @@ client
98
235
})
99
236
```
100
237
238
+
<br />
239
+
101
240
### URQL
102
241
103
-
Another option is [URQL](https://formidable.com/open-source/urql/), a somewhat lighter-weight GraphQL client library.
242
+
Another option is [URQL](https://formidable.com/open-source/urql/) which is available within Node.js, React/Preact, Vue, and Svelte environments, with more advanced features:
243
+
244
+
- Flexible cache system
245
+
- Extensible design (easing adding new capabilities on top of it)
246
+
- Lightweight bundle (~5x lighter than Apollo Client)
247
+
- Support for file uploads and offline mode
248
+
249
+
<br />
104
250
105
251
Let's look at how to fetch data from a subgraph with URQL in a web project.
0 commit comments