@grafoo/preact

Grafoo Preact Bindings

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