Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @yeutech/ra-data-graphql-simple with all npm packages installed. Try it out:

require("@yeutech/react-admin/package.json"); // @yeutech/react-admin is a peer dependency. require("graphql/package.json"); // graphql is a peer dependency. var raDataGraphqlSimple = require("@yeutech/ra-data-graphql-simple")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@yeutech/ra-data-graphql-simple v2.0.0-beta4-yeutech.4

A GraphQL simple data provider for react-admin


A GraphQL data provider for react-admin built with Apollo and tailored to target a simple GraphQL implementation.


Install with:

npm install --save graphql ra-data-graphql-simple


yarn add graphql ra-data-graphql-simple


The ra-data-graphql-simple package exposes a single function, which is a constructor for a dataProvider based on a GraphQL endpoint. When executed, this function calls the GraphQL endpoint, running an introspection query. It uses the result of this query (the GraphQL schema) to automatically configure the dataProvider accordingly.

// in App.js
import React, { Component } from 'react';
import buildGraphQLProvider from '@yeutech/ra-data-graphql-simple';
import { Admin, Resource, Delete } from '@yeutech/react-admin';

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

const client = new ApolloClient();

class App extends Component {
    constructor() {
        this.state = { dataProvider: null };
    componentDidMount() {
        buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000' }})
            .then(dataProvider => this.setState({ dataProvider }));

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

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

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

export default App;

Expected GraphQL Schema

The ra-data-graphql-simple function works against GraphQL servers that respect a certain GraphQL grammar. For instance, to handle all the actions on a Post resource, the GraphQL endpoint should support the following schema:

type Query {
  Post(id: ID!): Post
  allPosts(page: Int, perPage: Int, sortField: String, sortOrder: String, filter: PostFilter): [Post]
  _allPostsMeta(page: Int, perPage: Int, sortField: String, sortOrder: String, filter: PostFilter): ListMetadata

type Mutation {
  createPost(data: String): Post
  updatePost(data: String): Post
  removePost(id: ID!): Boolean

type Post {
    id: ID!
    title: String!
    views: Int!
    user_id: ID!
    User: User
    Comments: [Comment]

type PostFilter {
    q: String
    id: ID
    title: String
    views: Int
    views_lt: Int
    views_lte: Int
    views_gt: Int
    views_gte: Int
    user_id: ID    

type ListMetadata {
    count: Int!

scalar Date

This is the grammar used e.g. by marmelab/json-graphql-server, a client-side GraphQL server used for test purposes.


Customize the Apollo client

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

buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000', ...otherApolloOptions } });

Or supply your client directly with:

buildGraphQLProvider({ 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(,

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

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 buildApolloProvider function:

buildApolloProvider({ introspection: introspectionOptions });


You GraphQL backend may not allow multiple deletions or updates in a single query. This provider simply makes multiple requests to handle those. This is obviously not ideal but can be alleviated by supplying your own ApolloClient which could use the apollo-link-batch-http link if your GraphQL backend support query batching.


Run the tests with this command:

make test
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free