High Order component for Lokka
npm install lokka-hoc
Current features:
- query
- query with variables
- mutate
- mutate with variables
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 (
{
props.loading
? 'Loading'
: [
props.errors && props.errors.map(err => {err.message}
),
props.data && Data: {props.data}
]
}
);
}/*
* Connect component and query using
lokkify
*/
export default lokkify(App, / GraphQL /{);`API
$3
With this function you create connect function which will be able to do querying and renderinglokkifyFactory( 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) => {, 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.