Awesome
GraphQL Support for Meteor with Lokka
This is an alternative data layer for Meteor with GraphQL. Basically, it'll allow you to expose GraphQL schemas to the client.
Then you can use Lokka to interact with GraphQL schemas in the client side.
Usage
Add it your app with:
meteor add kadira:graphql
Then run your app with: meteor -p 3000
Then visit http://localhost:3000/graphql to see all the schemas available in your app.
Getting Started
Refer this guide to get started with GraphQL inside Meteor.
Features
- Register multiple GraphQL schemas.
- In Browser GraphQL IDE while development.
- Seamless client side integration with Lokka.
- React utilities.
- Meteor based Authorization
- Optimistic Updates support (via Lokka).
- Client Side Caching (via Lokka).
- Declarative Data Definition (via Lokka).
API
GraphQL Meteor intergration comes with few simple APIs. Let's explore them:
GraphQL.types [server only]
This holds all the types in GraphQL, where you can used to build GraphQL schemas. Check this schema for a sample usage.
GraphQL.registerSchema() [server only]
This API allows you to register a GraphQL schema with Meteor. Then you can use it on the client and inside the in-browser IDE.
const schema = new GraphQLSchema({
query,
mutation
});
GraphQL.registerSchema('Blog', schema);
Authorization
GraphQL uses Meteor methods as the transport layer. So, we can get the Meteor userId inside the GraphQL schema with the rootValue
to the schema.
See how to use it inside a schema.
GraphQL.createLokkaClient() [client only]
This API allows you to create a Lokka client. Then you can use it to interact with your schema.
This will return a Lokka client with the version of 1.6.0.
BlogSchema = GraphQL.createLokkaClient('Blog');
Check this app on how to use Lokka in a real app.
GraphQL.bindData() [client only]
This is a general purpose React utility to bind data to a react component. Specially for a stateless component via props.
Let's say we've a component like this.
const CurrentTime = ({time, text}) => (
<span>{text}: {time}</span>
);
We can bind the time to this component like this:
const onPropsChange = ((props, onData) => {
// start the setInterval
const handler = setInterval(() => {
let time = (new Date()).toString();
let text = "Current Time";
// check props and do some logic
if (props.timestamp) {
time = Date.now();
text = "Timestamp"
}
// send data like this
// if there's in an error,
// send an Error object instead null
onData(null, {time, text});
}, 1000);
// stop function to cleanup resources
const stop = () => {
clearInterval(handler);
}
// return the stop function which called when
// the component getting destroyed.
return stop;
});
const Clock = GraphQL.bindData(onPropsChange)(CurrentTime);
Then we can render our clock like this:
ReactDOM.render((
<div>
<Clock />
<Clock timestamp={true} />
</div>
), document.body);
See how to use
GraphQL.bindData
with Lokka: https://goo.gl/M758pR
Loading Component
GraphQL.bindData
will indentify the loading state of your component and it'll render a loading message to the UI. You can send a custom component like this:
const MyLoading = () => (
<div>...+++...</div>
);
const Clock = GraphQL.bindData(onPropsChange)(CurrentTime, MyLoading);
Error Component
Just like the loading component, you can send a custom component to handle the error message. For that, do it like this:
const MyError = ({error}) => (
<div>{error.message}</div>
);
const Clock = GraphQL.bindData(onPropsChange)(CurrentTime, null, MyError);