ember-graphql-examples

Contributing

Any contributions are grealty appreciated, feel free to open a pull request! 🎉

Clients

This app provides of the examples of:

• Setting up GraphQL Clients
• Different ember acceptance test techniques for GraphQL
• Linting queries against a schema

The application also includes a built-in GraphQL query client available at http://localhost:4200/api/graph.

Behind the scenes it is using ember-cli http-mocks with the json-graphql-server express middleware to provide a sample GraphQL api. The API is generated automatically from json data.

The http mock server is made available during tests by ember-cli-testem-http-mocks.

Querying

client	.graphql file	string	generated by ember-data-adapter
ember-apollo-client	✅
ember-graphql-adapter			✅
graphql-request		✅
lokka		✅

Relationships

"Relationships" in GraphQL are represented as a field with a list type.

client	relationships
ember-apollo-client	✅
ember-graphql-adapter	✅ *
graphql-request	✅
lokka	✅

* ember-graphql-adapter

The way the ember-graphql-adapter generates its query for relationships, based on the model definition, is not compatible with the github api's use of relay-style pagination. Relay pagination wraps results in the nodes field, allows arguments for pagination, and more. There is likely manual work needed to map conventions between what the adapter expects and the queries it generates.

The ember-graphql-adapter is more closely coupled with the example in its documentation using the graphql gem. If your relationships aren't coupled in a strong relational way where your graphql types are entities, you might run into some problems.

Integration with ember-simple-auth

Login with a github access token at /login, if it is a valid token then it is set on the session and ember-simple-auth session is set to be "authenticated".

client	ember-simple-auth integration
ember-apollo-client	✅ †
ember-graphql-adapter	✅
graphql-request	✅ *
lokka	✅ *

† ember-apollo-client authentication links

The ember apollo client supports the apollo links, a way of chaining modifications together. In this case we use the http-link to set the necessary Authorization header.

* Re-generating client instances (lokka, graphql-request)

There are outstanding issues for lokka (issue) and graphql-request (issue) that prevent dynamically changing/setting the authorization header. A wrapper service is setup in the same way for both lokka and graphql-request in which the client computed property depends on the session.data.token. Lingering client references that were saved in scope could fail to be used if they were setup with an old access token.

Linting queries against a schema with eslint-plugin-graphql

• .eslintrc.js - Setup the eslint-plugin-graphql configuration with
• ember-cli-build.js - include an entry if you need a .graphql files linted
• .graphqlconfig not required but if setup can be used by eslint-plugin-graphql for finding the schema

Testing

This example ember application also shows testing methods with polly.js, graphl-tools mock resolvers with pretender.js, and ember-cli-mirage-graphql.

General Tooling

There is some standardization in the GraphQL community to use .graphqlconfig files. This makes it easier to use with graphql-cli to generate a schema that is discoverable by the other tools.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with npm)
• Ember CLI
• Google Chrome

Installation

• git clone <repository-url> this repository
• cd ember-graphql-examples
• npm install

Running / Development

• ember serve
• Visit your app at http://localhost:4200.
• Visit your tests at http://localhost:4200/tests.

Code Generators

Make use of the many generators for code, try ember help generate for more details

Running Tests

• ember test
• ember test --server

Linting

• npm run lint:js
• npm run lint:js -- --fix

Building

• ember build (development)
• ember build --environment production (production)

Deploying

Specify what it takes to deploy your app.

Further Reading / Useful Links

• ember.js
• ember-cli
• Development Browser Extensions
  • ember inspector for chrome
  • ember inspector for firefox