All Projects → kloeckner-i → ember-cli-mirage-graphql

kloeckner-i / ember-cli-mirage-graphql

Licence: MIT license
A library for mocking GraphQL with Ember CLI Mirage

Programming Languages

javascript
184084 projects - #8 most used programming language
Handlebars
879 projects
HTML
75241 projects

Projects that are alternatives of or similar to ember-cli-mirage-graphql

ember-validity-modifier
Ember Octane addon to add custom validity (form validation) to form fields
Stars: ✭ 28 (+16.67%)
Mutual labels:  ember, ember-addon
ember-template-inspector
An ember add-on which opens the template file in the code editor while inspecting an element.
Stars: ✭ 15 (-37.5%)
Mutual labels:  ember, ember-addon
Ember Graphql Adapter
GraphQL adapter for Ember Data
Stars: ✭ 244 (+916.67%)
Mutual labels:  ember, ember-addon
ember-fastboot-addon-tests
Addon testing support for Fastboot compatibility
Stars: ✭ 24 (+0%)
Mutual labels:  ember, ember-addon
ember-right-click-menu
An easy and flexible addon to add context menus anywhere in your application
Stars: ✭ 14 (-41.67%)
Mutual labels:  ember, ember-addon
Ember Lifeline
An Ember addon for managing the lifecyle of asynchronous behavior in your objects
Stars: ✭ 241 (+904.17%)
Mutual labels:  ember, ember-addon
ember-airtable
Boilerplate for quickly prototyping apps with Airtable, Node & Ember
Stars: ✭ 21 (-12.5%)
Mutual labels:  ember, ember-addon
Ember Models Table
Table with pagination, sorting, filtering and much more
Stars: ✭ 212 (+783.33%)
Mutual labels:  ember, ember-addon
ember-cli-nouislider
{{range-slider}} component for ember-cli powered by noUiSlider
Stars: ✭ 43 (+79.17%)
Mutual labels:  ember, ember-addon
ember-pipeline
Railway oriented programming in Ember
Stars: ✭ 17 (-29.17%)
Mutual labels:  ember, ember-addon
Ember Service Worker
A pluggable approach to Service Workers for Ember.js
Stars: ✭ 227 (+845.83%)
Mutual labels:  ember, ember-addon
ember-qunit-assert-helpers
An ember-addon that provides additional QUnit 2.0 assertions specific to Ember.js.
Stars: ✭ 12 (-50%)
Mutual labels:  ember, ember-addon
Ember Font Awesome
ember-cli addon for using Font Awesome icons in Ember apps
Stars: ✭ 225 (+837.5%)
Mutual labels:  ember, ember-addon
ember-cli-string-helpers
Set of the String helpers extracted from DockYard's ember-composable-helpers.
Stars: ✭ 73 (+204.17%)
Mutual labels:  ember, ember-addon
Ember Cli Document Title
Adding document title behaviour to your ember app
Stars: ✭ 220 (+816.67%)
Mutual labels:  ember, ember-addon
ember-data-contentful
Ember Data adapter for contentful.com
Stars: ✭ 33 (+37.5%)
Mutual labels:  ember, ember-addon
Emberx Select
Select component for Ember based on the native html select element.
Stars: ✭ 202 (+741.67%)
Mutual labels:  ember, ember-addon
Ember Tooltips
Easy and extendible tooltips for Ember components - http://sir-dunxalot.github.io/ember-tooltips/
Stars: ✭ 205 (+754.17%)
Mutual labels:  ember, ember-addon
ember-vertical-timeline
A Vertical Timeline for Ember.js apps 🚀
Stars: ✭ 19 (-20.83%)
Mutual labels:  ember, ember-addon
ember-emojione
EmojiOne helper and components for your Ember App
Stars: ✭ 16 (-33.33%)
Mutual labels:  ember, ember-addon

Deprecated: Mock GraphQL with Ember CLI Mirage

This addon is deprecated in favor of @miragejs/graphql.

This addon is for mocking GraphQL with Ember CLI Mirage.

Compatibility

This addon should work with any version of Ember 2.0 and up as well as Ember CLI Mirage v0.4.7 to v1.1.x; however, we only test with Ember.js v3.12, v3.16 and up.

Note

This addon is very early in its development and the code currently supports limited use cases. If you would like to contribute, don't be afraid to trample any existing code. It's quite trampleable.

Installation

ember install ember-cli-mirage
ember install ember-cli-mirage-graphql

How It Works

This addon creates a request handler for use with Mirage that takes your GraphQL schema and creates mocks accordingly. In its simplest form, the mocks query data from Mirage's database, by type, and optionally filter records by matching query variables.

Example Usage

Quick Example

See the dummy app in this addon's tests folder for a complete example. Open the Mirage folder and notice the added handlers folder. This is where we created the GraphQL request handler callback. It can be imported in the Mirage config for use with your GraphQL request handler.

Note: There is no need to create a separate module for your handler, as we did, but we think it's nice to keep all the handler options out of the Mirage config.

Basic Example

If you're like us, you'll want to create your handler aside from your Mirage config:

// /mirage/handlers/graphql.js or wherever you like

import createGraphQLHandler from 'ember-cli-mirage-graphql/handler';
import schema from 'app-name/path-to-your-schema';

export default createGraphQLHandler(schema, /* options = {} */);

Notes:

  • We use a simple command line tool to download our schema: get-graphql-schema.
  • You can import and pass in your raw schema directly, as shown above, or you can pass in an instance of a GraphQLSchema, e.g., a case where you might merge multiple schemas.

Then import your handler for use in your Mirage config:

// /mirage/config.js

import graphQLHandler from './handlers/graphql';

export default function() {
  this.post('/path-to-graphql', graphQLHandler);
}

Handler Options

You may pass in options when creating a request handler. The options take the form of a hash and may contain the following:

{
  /*
    `fieldsMap` is used if you need to map a field defined in your
    GraphQL schema to a different field for a record in your Mirage
    database.

    This can happen if, for example, you are migrating from a JSON
    API backend to GraphQL and there are model name conflicts.

    In this example the mapping is for a relationship; however, you
    may map any field type.

    String values will be used to map field names from your query to
    match those in your Mirage database.

    Method values will be used to filter records and will run after
    any variable filtering and related data fetching. This allows for
    complex record filtering that can't be done with variables alone.
    The methods receive 3 arguments:

    1. The resolved records, if any.
    2. Mirage's database.
    3. Its parent record, if any.
   */
  fieldsMap: {
    Person: { // fields are mapped on a per-type basis
      pets: 'animals'
    }
  },
  /*
    `mutations` is an object used to mock mutation functionality you
    might expect from the server. Each method maps directly to a
    named mutation from your schema and receives 3 arguments:

    1. The table from Mirage's database that corresponds to the return
    type of the mutation.
    2. The mutation arguments. These will be mapped per the argsMap
    option, by the return type, if appropriate.
    3. Mirage's database.

    For now, this is the only way to mock mutations with this addon;
    however, we will try to implement some form of default mutation
    functionality, if feasible.
   */
  mutations: {
    updatePerson: (people, args, db) => {
      let { id, personAttributes } = args;

      return [ people.update(id, personAttributes) ];
    }
  },
  /*
    argsMap is used if you need to map arguments defined in your GraphQL
    queries to something other than the corresponding field name on the
    Mirage record. The value you specify in the map can be a string or a
    function.

    The addon uses the arguments to filter records of the given
    type from Mirage's database.

    String values will be used to map argument names to field names
    in case the argument name differs.

    Function values will be used to filter records. The function
    will be passed an array of records, the argument name (key)
    and the argument value.
   */
  argsMap: {
    Person: { // arguments are mapped on a per-type basis
      pageSize: (records, _, pageSize) => records.slice(0, pageSize)
    }
  },
  /*
  `scalarMocks` is used if you have custom scalars and you need to mock them to
   return a default value
  */
  scalarMocks: {
    MyCustomScalar: () => {
      return 'some custom value'
    }
  }
}

Contributing

Any contributors are most welcome!

Please file issues, as appropriate. Feature requests would be nice in the form of use cases. Knowing how you are using GraphQL should help contributors make the addon more capable.

PRs are also welcome, provided they relate to an issue or add functionality for a certain use case, and should generally follow the same coding style as the rest of the addon.

See the Contributing guide for details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].