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
or
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() {
super();
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} />
</Admin>
);
}
}
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.
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 });
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