# 🎡 Hyper Fetch GraphQL
GraphQL adapter for HyperFetch. Typed queries, mutations, and subscriptions.
## 📖 About
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.
## 🎯 Key Capabilities
- 🎡 **GraphQL meets HyperFetch** — Typed queries, mutations, and subscriptions with cache and queue support
- 🔮 **End-to-end types** — Full TypeScript types for operations, variables, and responses
- 📡 **Any GraphQL server** — Compatible with Apollo, Yoga, Hasura, and any spec-compliant endpoint
- ⚛️ **React-ready** — Use `useFetch` and `useSubmit` for GraphQL operations in components
- 💾 **Smart caching included** — Cache and offline support work the same as REST — no extra config
## 🚀 Quick Start
```bash
npm install @hyper-fetch/core @hyper-fetch/graphql
```
```ts
import { createClient } from "@hyper-fetch/core";
import { GraphQLAdapter } from "@hyper-fetch/graphql";
const client = createClient({ url: "https://api.example.com/graphql" }).setAdapter(GraphQLAdapter());
```
## 📚 Documentation
- [GraphQL Adapter Docs](https://hyperfetch.bettertyped.com/docs/integrations/adapter-graphql)
- [Getting Started](https://hyperfetch.bettertyped.com/docs/getting-started/quick-start)
- [API Reference](https://hyperfetch.bettertyped.com/api/)
## 💡 Examples
### Query
```ts
interface UsersResponse {
users: { id: string; name: string; email: string }[];
}
const getUsers = client.createRequest<{ response: UsersResponse }>()({
endpoint: "",
method: "POST",
});
const { data } = await getUsers
.setData({
query: `
query GetUsers($limit: Int) {
users(limit: $limit) {
id
name
email
}
}
`,
variables: { limit: 10 },
})
.send();
console.log(data.users);
```
### Mutation
```ts
interface CreateUserResponse {
createUser: { id: string; name: string };
}
const createUser = client.createRequest<{
response: CreateUserResponse;
}>()({
endpoint: "",
method: "POST",
});
const { data } = await createUser
.setData({
query: `
mutation CreateUser($name: String!, $email: String!) {
createUser(name: $name, email: $email) {
id
name
}
}
`,
variables: { name: "Jane", email: "jane@example.com" },
})
.send();
console.log("Created:", data.createUser.name);
```
### With React hooks
```tsx
import { useFetch } from "@hyper-fetch/react";
const UserList = () => {
const { data, loading } = useFetch(
getUsers.setData({
query: `{ users { id name } }`,
}),
);
if (loading) return Loading...
;
return (
{data?.users.map((u) => (
- {u.name}
))}
);
};
```
## License
[MIT](https://github.com/BetterTyped/hyper-fetch/blob/main/License.md)