lokka-hoc

High order component for Lokka GraphQL client


Warning

This package in development. Not all features from Lokka\GraphQL are supported.

Current features:
- query
- query with variables
- mutate
- mutate with variables

How to install

``
npm i lokka-hoc -S
`

How to use

`js
/*
* Import dependencies
*/
import { Lokka } from 'lokka';
import { Transport } from 'lokka-transport-http';
import { lokkifyFactory } from 'lokka-hoc';

/*
* Setup Lokka client
*/
const client = new Lokka({
transport: new Transport('')
});

/*
* Create lokkify connect function
* this could be done once and you can export lokkify
*/
// React by default
const lokkify = lokkifyFactory(client);

// or React explicitly (if you don't have it in global)
const lokkify = lokkifyFactory(client, React);

// or preact explicitly (if you don't have it in global)
const lokkify = lokkifyFactory(client, preact);

/*
* Define your component
*/
function App(props) {
return (


);
}

/*
* Connect component and query using lokkify
*/
export default lokkify(App, / GraphQL /{
posts {
id,
title,
content
}
});

`

API

$3

With this function you create connect function which will be able to do querying and rendering

lokkifyFactory(, [React || preact]) it will return lokkify function

$3


lokkify is used to connect your component and graphql.
lokkify(App, query, mutations) where
- App component you want to connect
- query string representing your main graphql query or a function which receives props from parent component and returns a string:
`javascript
lokkify(App, (props) => {
test(limit: "${props.limit}")
}, mutations)
`
- mutations object where key is a name for mutation and value is graphql mutation string.

$3

boolean value for current query state

$3

any result of main query

$3

array all errors occurred during the query

$3

function to refetch main query with optional vars

$3

function to mutation with name (name is a key from lokkify third argument object) and vars. Returns a Promise

Motivation

I like the idea of simplicity and modularity of lokka. But it required a lot of boilerplate code. I was also inspired by simplicity of react-apollo. Unfortunately it doesn't simple to make it work with preact` or any other react-like libraries.