Examples of using GraphQL in an Ember App
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
config
mirage
public
recordings
server
tests
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.graphqlconfig
.travis.yml
.watchmanconfig
README.md
ember-cli-build.js
package-lock.json
package.json
testem.js
yarn.lock

README.md

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.

Installation

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

Running / Development

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