Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

meteor-graphql

GraphQL Support for Meteor with Lokka

Subscribe to updates I use meteor-graphql


Statistics on meteor-graphql

Number of watchers on Github 90
Number of open issues 10
Average time to close an issue 1 day
Main language JavaScript
Average time to merge a PR 1 day
Open pull requests 1+
Closed pull requests 0+
Last commit over 3 years ago
Repo Created over 3 years ago
Repo Last Updated about 2 years ago
Size 32 KB
Organization / Authorkadirahq
Contributors3
Page Updated
Do you use meteor-graphql? Leave a review!
View open issues (10)
View meteor-graphql activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating meteor-graphql for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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);
meteor-graphql open issues Ask a question     (View All Issues)
  • almost 3 years timer example error
  • over 3 years One Server, Multiple Clients
  • over 3 years Two Questions
  • over 3 years Error: 'return' outside of function
  • over 3 years Support server to server query
  • over 3 years Can this be added to data fetching layer?
  • over 3 years Add ability to enable GraphiQL in production
  • over 3 years Catch resolve errors and process there carefully
  • over 3 years Real-time GraphQL Publications
meteor-graphql open pull requests (View All Pulls)
  • Server side, GraphQL.createLokkaClient function
meteor-graphql list of languages used
Other projects in JavaScript