@grafoo/preact

grafoo client preact bindings

Stats

StarsIssuesVersionUpdatedCreatedSize
@grafoo/preact
264121.5.19 months ago3 years agoMinified + gzip package size for @grafoo/preact in KB

Readme

@grafoo/preact

Grafoo Preact Bindings

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

Install

$ npm i @grafoo/{core,react} && npm i -D @grafoo/babel-plugin

API

For documentation please refer to @grafoo/react's page since both modules share the same API.

Example

index.js

import { h, render } from "preact";
import createClient from "@grafoo/core";
import { Provider } from "@grafoo/preact";

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);

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

Posts.js

import { h } from "preact";
import gql from "@grafoo/core/tag";
import { Consumer } from "@grafoo/preact";

const ALL_POSTS = gql`
  query getPosts($orderBy: PostOrderBy) {
    allPosts(orderBy: $orderBy) {
      title
      content
      createdAt
      updatedAt
    }
  }
`;

export default function Posts() {
  return (
    <Consumer query={ALL_POSTS} variables={{ orderBy: "createdAt_DESC" }}>
      {({ client, load, loaded, loading, errors, allPosts }) => (
        <h1>
          <marquee>👆 do whatever you want with the variables above 👆</marquee>
        </h1>
      )}
    </Consumer>
  );
}

LICENSE

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.