https://github.com/chadian/ember-graphql-examples
Examples of using GraphQL in an Ember App
https://github.com/chadian/ember-graphql-examples
ember ember-graphql graphql graphql-client schema
Last synced: 8 months ago
JSON representation
Examples of using GraphQL in an Ember App
- Host: GitHub
- URL: https://github.com/chadian/ember-graphql-examples
- Owner: chadian
- Created: 2018-09-01T13:58:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-12T07:34:23.000Z (over 7 years ago)
- Last Synced: 2025-08-03T12:51:59.618Z (9 months ago)
- Topics: ember, ember-graphql, graphql, graphql-client, schema
- Language: JavaScript
- Homepage:
- Size: 214 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-ember - ember-graphql-examples - Examples of using GraphQL in Ember.js. (Packages / Examples)
README
# 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](http://localhost:4200/api/graph).
Behind the scenes it is using [ember-cli http-mocks](https://ember-cli.com/ember-data#mocks) with the
[`json-graphql-server` express middleware](https://github.com/marmelab/json-graphql-server) to provide
a sample GraphQL api. The API is generated automatically from [json data](https://github.com/chadian/ember-graphql-examples/tree/master/server/data).
The http mock server is made available during tests by [`ember-cli-testem-http-mocks`](https://github.com/jasonmit/ember-cli-testem-http-mocks).
### Querying
| client | .graphql file | string | generated by ember-data-adapter |
|:--------------------------------------------------------------------------------|:--------------|:-------|:--------------------------------|
| [`ember-apollo-client`](https://github.com/bgentry/ember-apollo-client) | ✅ | | |
| [`ember-graphql-adapter`](https://github.com/alphasights/ember-graphql-adapter) | | | ✅ |
| [`graphql-request`](https://github.com/prisma/graphql-request) | | ✅ | |
| [`lokka`](https://github.com/kadirahq/lokka) | | ✅ | |
### Relationships
"Relationships" in GraphQL are represented as a field with a list type.
| client | relationships |
|:--------------------------------------------------------------------------------|:--------------|
| [`ember-apollo-client`](https://github.com/bgentry/ember-apollo-client) | ✅ |
| [`ember-graphql-adapter`](https://github.com/alphasights/ember-graphql-adapter) | ✅ * |
| [`graphql-request`](https://github.com/prisma/graphql-request) | ✅ |
| [`lokka`](https://github.com/kadirahq/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](https://facebook.github.io/relay/graphql/connections.htm). 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](https://github.com/alphasights/ember-graphql-adapter#rails-example) using the [graphql gem](https://github.com/rmosolgo/graphql-ruby).
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`](https://github.com/bgentry/ember-apollo-client) | ✅ †|
| [`ember-graphql-adapter`](https://github.com/alphasights/ember-graphql-adapter) | ✅ |
| [`graphql-request`](https://github.com/prisma/graphql-request) | ✅ * |
| [`lokka`](https://github.com/kadirahq/lokka) | ✅ * |
#### †`ember-apollo-client` authentication links
The ember apollo client supports the [apollo links](https://github.com/apollographql/apollo-link), a way of chaining
modifications together. In this case we use the [`http-link`](https://www.apollographql.com/docs/link/links/http.html#context) to
set the necessary `Authorization` header.
#### * Re-generating client instances (`lokka`, `graphql-request`)
There are outstanding issues for lokka ([issue](https://github.com/kadirahq/lokka-transport-http/issues/24)) and graphql-request ([issue](https://github.com/prisma/graphql-request/pull/91)) 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](https://netflix.github.io/pollyjs/), [`graphl-tools`](https://github.com/apollographql/graphql-tools) mock resolvers with [pretender.js](https://github.com/pretenderjs/pretender), and [`ember-cli-mirage-graphql`](https://github.com/kloeckner-i/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](https://git-scm.com/)
* [Node.js](https://nodejs.org/) (with npm)
* [Ember CLI](https://ember-cli.com/)
* [Google Chrome](https://google.com/chrome/)
## Installation
* `git clone ` this repository
* `cd ember-graphql-examples`
* `npm install`
## Running / Development
* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).
* Visit your tests at [http://localhost:4200/tests](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](https://emberjs.com/)
* [ember-cli](https://ember-cli.com/)
* Development Browser Extensions
* [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
* [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)