data-client-graphql-setup

Configures GQLEndpoint with authentication and error handling for GraphQL APIs.

2.0k|99|Updated Feb 15, 2019
One-click install
npx skills add https://github.com/reactive/data-client --skill data-client-graphql-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-client-graphql-setup
Source: https://github.com/reactive/data-client/tree/main/.agents/skills/data-client-graphql-setup
Command: npx skills add https://github.com/reactive/data-client --skill data-client-graphql-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @data-client/graphql, @data-client/react, and includes references (resource) components.

What problem does it solve?

Setting up a GraphQL data layer with proper authentication, error handling, and typed queries requires repetitive boilerplate. This Skill configures @data-client/graphql so your GraphQL endpoint, queries, and mutations work with Reactive Data Client's caching and React hooks out of the box.

Core Features & Use Cases

  • GQLEndpoint Configuration: Create a configured GQLEndpoint instance with sync or async authentication headers, including token refresh patterns.
  • Custom Error Handling: Extend GQLEndpoint to intercept GraphQL errors such as UNAUTHENTICATED responses and dispatch auth events.
  • Query and Mutation Definitions: Define typed GraphQL queries and mutations bound to Entity schemas and Collections, then consume them in components via useSuspense and useController.
  • Use Case: After detecting GraphQL patterns in a project, install @data-client/graphql, create src/api/gql.ts with Bearer token auth, and define a getUser query plus an updateUser mutation wired to a User schema.

Quick Start

Set up @data-client/graphql in my project with a GQLEndpoint that uses Bearer token authentication and define a query and mutation for my User entity.

Frequently Asked Questions about data-client-graphql-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up GQLEndpoint with authentication in @data-client/graphql?▼

Create a GQLEndpoint instance with a getHeaders option that returns your Authorization header. For token refresh, make getHeaders async and await a token retrieval function before returning the headers object.

How to define GraphQL queries and mutations with Reactive Data Client?▼

Use gql.query or gql.mutation with a function returning the GraphQL document string, passing a schema option like an Entity or Collection. Mutations that add items can use Collection.push as the schema.

Does @data-client/graphql handle GraphQL errors like UNAUTHENTICATED?▼

Yes, by extending GQLEndpoint and overriding fetchResponse you can inspect response.errors and react to error codes such as UNAUTHENTICATED, for example by dispatching an auth:expired event.

Can I use @data-client/graphql with React Suspense?▼

Yes, queries defined with gql.query work with useSuspense from @data-client/react, and mutations are triggered through useController's fetch method inside components.

When should I apply the GraphQL setup versus the base data-client setup?▼

Apply this setup only after the base data-client-setup skill detects GraphQL patterns in your codebase, such as a /graphql endpoint or existing GraphQL client configuration.