graphql-hooks

???? Minimal hooks-first GraphQL client

graphql-hooks

Features

  • ???? First-class hooks API
  • ⚖️ Tiny bundle: only 5.1kB (1.9 gzipped)
  • ???? Full SSR support: see graphql-hooks-ssr
  • ???? Plugin Caching: see graphql-hooks-memcache
  • ???? No more render props hell
  • ⏳ Handle loading and error states with ease

Install

npm install graphql-hooks

or

yarn add graphql-hooks

Support

Consider polyfilling:

Quick Start

First you’ll need to create a client and wrap your app with the provider:

import { GraphQLClient, ClientContext } from 'graphql-hooks';

const client = new GraphQLClient({
  url: '/graphql'
});

function App() {
  return (
    
      {/* children */}
    
  );
}

Now in your child components you can make use of useQuery

import { useQuery } from 'graphql-hooks';

const HOMEPAGE_QUERY = `query HomePage($limit: Int) {
  users(limit: $limit) {
    id
    name
  }
}`;

function MyComponent() {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY, {
    variables: {
      limit: 10
    }
  });

  if (loading) return 'Loading...';
  if (error) return 'Something Bad Happened';

  return (
    • {data.users.map(({ id, name }) => (

    • {name}

))}

); }

Table of Contents

API

GraphQLClient

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares