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