• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

grafoojs/grafoo: A GraphQL Client and Toolkit

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称（OpenSource Name）：

grafoojs/grafoo

开源软件地址(OpenSource Url)：

https://github.com/grafoojs/grafoo

开源编程语言(OpenSource Language)：

TypeScript 70.3%

开源软件介绍(OpenSource Introduction)：


Grafoo

A GraphQL Client and Toolkit

build coverage npm downloads code style: prettier mantained with: lerna slack

Grafoo is a GraphQL client that tries to be different by adopting a simpler API, without giving up of a good caching strategy.

Some useful information

  • It's a multiple paradigm library. So far we have view layer integrations for react and preact and there are more to come.
  • It's not just a HTTP client. It comes with a sophisticated caching system under the hood to make sure your data is consistent across your app.
  • It's build time dependent. A important piece of Grafoo is it's babel plugin that compiles your queries based on the schema your app consumes.
  • It's environment agnostic. Apart from the browser you can run Grafoo on the server and even on native with react.

Why should I use this

Many of the work that has been put into this project came from borrowed ideas and concepts that are present in the GraphQL clients we have today. Grafoo wants to stand apart from the others trying to be in that sweet spot between simplicity and usability. Moreover, most of the benefits this library brings to the table are related to the fact that it does a lot at build time. It's fast, because it spares runtime computation and it's really small (something like ~1.6kb for core and react) because it does not ship with a GraphQL parser.

Example applications

You can refer to examples in this repository.

Basic usage

Installation

The basic packages you'll have to install in order to use Grafoo are core and babel-plugin.

$ npm i @grafoo/core && npm i -D @grafoo/babel-plugin

Configure babel

In @grafoo/babel-plugin the option schema is a path to a GraphQL schema in your file system relative to the root of your project and idFields is an array of strings that represent the fields that Grafoo will automatically insert on your queries to build unique identifiers in order to normalize the cache. Both options are required.

{
  "plugins": [
    [
      "@grafoo/babel-plugin",
      {
        "schema": "schema.graphql",
        "idFields": ["id"]
      }
    ]
  ]
}

Writing your app

From @grafoo/core you will import the factory that creates the client instance and from submodule @grafoo/core/tag you'll import the graphql or gql tag that will be compiled at build time.

import createClient from "@grafoo/core";
import gql from "@grafoo/core/tag";

function fetchQuery(query, variables) {
  const init = {
    method: "POST",
    body: JSON.stringify({ query, variables }),
    headers: {
      "content-type": "application/json"
    }
  };

  return fetch("http://some.graphql.api", init).then(res => res.json());
}

const client = createClient(fetchQuery);

const USER_QUERY = gql`
  query($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

const variables = { id: 123 };

client.execute(USER_QUERY, variables).then(data => {
  // Write to cache
  client.write(USER_QUERY, variables, data);

  // Do whatever with returned data
  console.log(data);

  // Read from cache at a later stage
  console.log(client.read(USER_QUERY, variables));
});

// If you wish to reset (clear) the cache:
client.reset();

With a framework

Here is how it would go for you to write a simple react app.

index.js

import React from "react";
import ReactDom from "react-dom";
import createClient from "@grafoo/core";
import { Provider } from "@grafoo/react";

import Posts from "./Posts";

function fetchQuery(query, variables) {
  const init = {
    method: "POST",
    body: JSON.stringify({ query, variables }),
    headers: {
      "content-type": "application/json"
    }
  };

  return fetch("http://some.graphql.api", init).then(res => res.json());
}

const client = createClient(fetchQuery);

ReactDom.render(
  <Provider client={client}>
    <Posts />
  </Provider>,
  document.getElementById("mnt")
);

Posts.js


鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
zamarrowski/Curso-React-Testing-GraphQL: Curso React, testing y GraphQL发布时间：2022-06-22
下一篇：
gmac/schema-stitching-handbook: Guided examples exploring GraphQL Tools v6+ Sche ...发布时间：2022-06-22
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap