@hyper-fetch/graphql 8.1.1 โ†’ 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +126 -49
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,10 @@
1
1
  # ๐ŸŽก Hyper Fetch GraphQL
2
2
 
3
- <p>
3
+ <p align="center">
4
+ <b>GraphQL adapter for HyperFetch. Typed queries, mutations, and subscriptions.</b>
5
+ </p>
6
+
7
+ <p align="center">
4
8
  <a href="https://bettertyped.com/">
5
9
  <img src="https://custom-icon-badges.demolab.com/static/v1?label=&message=BetterTyped&color=333&logo=BT" />
6
10
  </a>
@@ -13,58 +17,131 @@
13
17
  <a href="https://www.npmjs.com/package/@hyper-fetch/graphql">
14
18
  <img src="https://custom-icon-badges.demolab.com/npm/v/@hyper-fetch/graphql.svg?logo=npm&color=e76f51" />
15
19
  </a>
16
- <a href="https://github.com/BetterTyped/hyper-fetch">
17
- <img src="https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white" />
20
+ <a href="https://www.npmjs.com/package/@hyper-fetch/graphql">
21
+ <img src="https://custom-icon-badges.demolab.com/npm/dm/@hyper-fetch/graphql?logoColor=fff&logo=trending-up" />
18
22
  </a>
19
23
  <a href="https://github.com/BetterTyped/hyper-fetch">
20
- <img src="https://custom-icon-badges.demolab.com/badge/-GraphQL-E10098?logo=graphql&logoColor=white" />
24
+ <img src="https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white" />
21
25
  </a>
22
- <a href="https://www.npmjs.com/package/@hyper-fetch/graphql">
26
+ <a href="https://bundlephobia.com/package/@hyper-fetch/graphql">
23
27
  <img src="https://custom-icon-badges.demolab.com/bundlephobia/minzip/@hyper-fetch/graphql?color=64BC4B&logo=package" />
24
28
  </a>
29
+ <a href="https://github.com/BetterTyped/hyper-fetch">
30
+ <img src="https://img.shields.io/badge/graphql-e10098?logo=graphql&logoColor=white" alt="GraphQL" />
31
+ </a>
25
32
  </p>
26
33
 
27
- ## About
28
-
29
- **`Hyper Fetch GraphQL`** is adapter for Hyper Fetch. It enables seamless communication with GraphQL APIs in Node.js and
30
- browser environments, simplifying the retrieval and manipulation of data. Benefit from the convenience and efficiency of
31
- Hyper Fetch for your GraphQL-powered projects.
32
-
33
- ## Features
34
-
35
- ๐Ÿ”ฎ **Simple setup** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/setup)
36
-
37
- ๐ŸŽฏ **Request cancellation** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/cancellation)
38
-
39
- โœจ **Window Focus/Blur Events** -
40
- [Read more](https://hyperfetch.bettertyped.com/docs/guides/react/core/window-focus-blur)
41
-
42
- ๐Ÿš€ **Queueing** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/queueing)
43
-
44
- ๐Ÿ’Ž **Automatic caching** - [Read more](https://hyperfetch.bettertyped.com/docs/core/cache)
45
-
46
- ๐Ÿช„ **Persistence** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/persistence)
47
-
48
- ๐ŸŽŠ **SSR Support** - [Read more](https://hyperfetch.bettertyped.com/docs/getting-started/environment)
49
-
50
- ๐Ÿ”‹ **Offline First** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/offline)
51
-
52
- ๐Ÿ“ก **Built-in adapter** - [Read more](https://hyperfetch.bettertyped.com/docs/core/adapter)
53
-
54
- ๐Ÿงช **Easy to test** - [Read more](https://hyperfetch.bettertyped.com/docs/getting-started/testing)
55
-
56
- ๐ŸŽŸ **Authentication** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/basic/authentication)
57
-
58
- ๐Ÿ’ก **Prefetching** - [Read more](https://hyperfetch.bettertyped.com/docs/guides/advanced/prefetching)
59
-
60
- ## Help me keep working on this project โค๏ธ
61
-
62
- - [Become a Sponsor on GitHub](https://github.com/sponsors/prc5)
63
-
64
- ## Sources
65
-
66
- - #### [Installation](https://hyperfetch.bettertyped.com/docs/getting-started/installation)
67
- - #### [Docs](https://hyperfetch.bettertyped.com/)
68
- - #### [API](https://hyperfetch.bettertyped.com/api/)
69
- - #### [NPM](https://www.npmjs.com/package/@hyper-fetch/graphql)
70
- - #### [Guides](https://hyperfetch.bettertyped.com/guides/Basic/Setup)
34
+ ## ๐Ÿ“– About
35
+
36
+ This adapter connects HyperFetch to GraphQL APIs. You get typed queries, mutations, and subscriptions that work with HyperFetch's caching, queuing, and React hooks โ€” the same request patterns you use for REST, but with GraphQL operations.
37
+
38
+ ## ๐ŸŽฏ Key Capabilities
39
+
40
+ - ๐ŸŽก **GraphQL meets HyperFetch** โ€” Typed queries, mutations, and subscriptions with cache and queue support
41
+ - ๐Ÿ”ฎ **End-to-end types** โ€” Full TypeScript types for operations, variables, and responses
42
+ - ๐Ÿ“ก **Any GraphQL server** โ€” Compatible with Apollo, Yoga, Hasura, and any spec-compliant endpoint
43
+ - โš›๏ธ **React-ready** โ€” Use `useFetch` and `useSubmit` for GraphQL operations in components
44
+ - ๐Ÿ’พ **Smart caching included** โ€” Cache and offline support work the same as REST โ€” no extra config
45
+
46
+ ## ๐Ÿš€ Quick Start
47
+
48
+ ```bash
49
+ npm install @hyper-fetch/core @hyper-fetch/graphql
50
+ ```
51
+
52
+ ```ts
53
+ import { createClient } from "@hyper-fetch/core";
54
+ import { GraphQLAdapter } from "@hyper-fetch/graphql";
55
+
56
+ const client = createClient({ url: "https://api.example.com/graphql" }).setAdapter(GraphQLAdapter());
57
+ ```
58
+
59
+ ## ๐Ÿ“š Documentation
60
+
61
+ - [GraphQL Adapter Docs](https://hyperfetch.bettertyped.com/docs/integrations/adapter-graphql)
62
+ - [Getting Started](https://hyperfetch.bettertyped.com/docs/getting-started/quick-start)
63
+ - [API Reference](https://hyperfetch.bettertyped.com/api/)
64
+
65
+ ## ๐Ÿ’ก Examples
66
+
67
+ ### Query
68
+
69
+ ```ts
70
+ interface UsersResponse {
71
+ users: { id: string; name: string; email: string }[];
72
+ }
73
+
74
+ const getUsers = client.createRequest<{ response: UsersResponse }>()({
75
+ endpoint: "",
76
+ method: "POST",
77
+ });
78
+
79
+ const { data } = await getUsers
80
+ .setData({
81
+ query: `
82
+ query GetUsers($limit: Int) {
83
+ users(limit: $limit) {
84
+ id
85
+ name
86
+ email
87
+ }
88
+ }
89
+ `,
90
+ variables: { limit: 10 },
91
+ })
92
+ .send();
93
+
94
+ console.log(data.users);
95
+ ```
96
+
97
+ ### Mutation
98
+
99
+ ```ts
100
+ interface CreateUserResponse {
101
+ createUser: { id: string; name: string };
102
+ }
103
+
104
+ const createUser = client.createRequest<{
105
+ response: CreateUserResponse;
106
+ }>()({
107
+ endpoint: "",
108
+ method: "POST",
109
+ });
110
+
111
+ const { data } = await createUser
112
+ .setData({
113
+ query: `
114
+ mutation CreateUser($name: String!, $email: String!) {
115
+ createUser(name: $name, email: $email) {
116
+ id
117
+ name
118
+ }
119
+ }
120
+ `,
121
+ variables: { name: "Jane", email: "jane@example.com" },
122
+ })
123
+ .send();
124
+
125
+ console.log("Created:", data.createUser.name);
126
+ ```
127
+
128
+ ### With React hooks
129
+
130
+ ```tsx
131
+ import { useFetch } from "@hyper-fetch/react";
132
+
133
+ const UserList = () => {
134
+ const { data, loading } = useFetch(
135
+ getUsers.setData({
136
+ query: `{ users { id name } }`,
137
+ }),
138
+ );
139
+
140
+ if (loading) return <p>Loading...</p>;
141
+ return <ul>{data?.users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
142
+ };
143
+ ```
144
+
145
+ ## License
146
+
147
+ [MIT](https://github.com/BetterTyped/hyper-fetch/blob/main/License.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyper-fetch/graphql",
3
- "version": "8.1.1",
3
+ "version": "8.2.0",
4
4
  "description": "Simple graphql adapter",
5
5
  "author": "Maciej Pyrc <maciekpyrc@gmail.com>, Kacper Skawina <kacper.skawina@gmail.com>",
6
6
  "homepage": "https://hyperfetch.bettertyped.com/",