gqless-hook v0.0.4

gqless-hook

Yet another React hook for gqless

Introduction

gqless is a library for GraphQL without writing queries. It includes a HoC-based React binding library.

This library is a third-party hook-based React binding library. It's proof of concept at this moment and many features are not yet implementetd: multi hooks, partial loading, polling, variables, mutation, subscription, and so on. As of its nature, the fetch pattern is Fetch-on-Render even in Concurrent Mode.

Install

npm install gqless-hook gqless

Usage

Setup

Create .gqlessrc.json:

{
  "url": "https://www.graphqlhub.com/graphql",
  "outputDir": "./src/graphql"
}

Generate client:

gqless generate

(You need npm install -D @gqless/cli in advance.)

Example Code

import React, { Suspense } from 'react';

import { useQuery } from 'gqless-hook';

import { client, HackerNewsItem } from './graphql';

type Props = {
  story: HackerNewsItem;
};

const Story = React.memo<Props>(({ story }) => (
  <article>
    <h2>
      <a href={story.url || ''}>{story.title}</a>
    </h2>
    <div>
      <span>{story.score} points</span>
      <a href={`https://news.ycombinator.com/user?id=${story.by.id}`}>
        {story.by.id}
      </a>
      <a href={`https://news.ycombinator.com/item?id=${story.id}`}>
        {story.descendants} comments
      </a>
    </div>
  </article>
));

const TopStories: React.FC = () => {
  const query = useQuery(client);
  return (
    <div>
      {query.hn?.topStories({ limit: 25 })?.map((story) => (
        story && <Story key={story.id} story={story} />
      ))}
    </div>
  );
};

export const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <TopStories />
  </Suspense>
);

API

useQuery

useQuery

This hook returns query from gqless.

Parameters

• client Client<Data>

Examples

import { useQuery } from 'gqless-hook';
import { client } from '../graphql'; // generated by @gqless/cli

const Component = () => {
  const query = useQuery(client);
  return (
    <div>{query.foo}</div>
  );
};

Returns Data

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:01_graqhqlhub

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01