A Graphcool GraphQL client for admin-on-rest


000.0.194 years ago5 years agoMinified + gzip package size for @iolap/aor-graphql-client-graphcool in KB



Build Status

A GraphQL client for admin-on-rest built with Apollo and tailored to target the GraphCool service.

A version of the admin-on-rest demo using this client is available at https://admin-on-rest-graphql.now.sh/.
The source code for this demo is available at https://github.com/marmelab/aor-graphql/packages/admin-on-rest-graphql-demo.


Install with:

npm install --save aor-graphql-client-graphcool


yarn add aor-graphql-client-graphcool


This example assumes a Post type is defined in the graphcool schema.

// in App.js
import React, { Component } from 'react';
import buildApolloClient from 'aor-graphql-client-graphcool';

import { Admin, Resource } from 'admin-on-rest';
import { Delete } from 'admin-on-rest/lib/mui';

import { PostCreate, PostEdit, PostList } from './posts';

const client = new ApolloClient();

class App extends Component {
    constructor() {
        this.state = { restClient: null };
    componentDidMount() {
        buildApolloClient({ client: { uri: 'https://api.graph.cool/simple/v1/graphcool_id' }})
            .then(restClient => this.setState({ restClient }));

    render() {
        const { restClient } = this.state;

        if (!restClient) {
            return <div>Loading</div>;

        return (
            <Admin restClient={restClient}>
                <Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} remove={Delete} />

export default App;

And that's it, buildApolloClient will create a default ApolloClient for you and run an introspection query on your graphcool endpoint, listing all potential resources.


Customize the Apollo client

You can either supply the client options by calling buildApolloClient like this:

buildApolloClient({ client: { uri: 'https://api.graph.cool/simple/v1/graphcool_id', ...otherApolloOptions } });

Or supply your client directly with:

buildApolloClient({ client: myClient });

Customize the introspection

These are the default options for introspection:

const introspectionOptions = {
    include: [], // Either an array of types to include or a function which will be called for every type discovered through introspection
    exclude: [], // Either an array of types to exclude or a function which will be called for every type discovered through introspection

// Including types
const introspectionOptions = {
    include: ['Post', 'Comment'],

// Excluding types
const introspectionOptions = {
    exclude: ['CommandItem'],

// Including types with a function
const introspectionOptions = {
    include: type => ['Post', 'Comment'].includes(type.name),

// Including types with a function
const introspectionOptions = {
    exclude: type => !['Post', 'Comment'].includes(type.name),

Note: exclude and include are mutualy exclusives and include will take precendance.

Note: When using functions, the type argument will be a type returned by the introspection query. Refer to the introspection documentation for more information.

Pass the introspection options to the buildApolloClient function:

buildApolloClient({ introspection: introspectionOptions });


Run the tests with this command:

make test

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.