🎡 Hyper Fetch GraphQL

📖 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

npm install @hyper-fetch/core @hyper-fetch/graphql

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
• Getting Started
• API Reference

💡 Examples

Query

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

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: "[email protected]" },
  })
  .send();

console.log("Created:", data.createUser.name);

With React hooks

import { useFetch } from "@hyper-fetch/react";

const UserList = () => {
  const { data, loading } = useFetch(
    getUsers.setData({
      query: `{ users { id name } }`,
    }),
  );

  if (loading) return <p>Loading...</p>;
  return <ul>{data?.users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
};

License

MIT