admin_on_rest_apollo_client_graphql_data_provider_setup.ts

1import React, { Component } from 'react';
2import { Admin, Resource } from 'admin-on-rest';
3import buildApolloClient from 'aor-apollo-client';
4
5import { PostList, PostEdit, PostCreate, PostShow } from './posts';
6
7interface AppState {
8    dataProvider: any | null;
9}
10
11class App extends Component<{}, AppState> {
12    constructor(props: {}) {
13        super(props);
14        this.state = { dataProvider: null };
15    }
16
17    componentDidMount() {
18        buildApolloClient({
19            clientOptions: {
20                uri: 'http://localhost:4000/graphql',
21            },
22        }).then(dataProvider => this.setState({ dataProvider }));
23    }
24
25    render() {
26        const { dataProvider } = this.state;
27
28        if (!dataProvider) {
29            return <div>Loading</div>;
30        }
31
32        return (
33            <Admin dataProvider={dataProvider}>
34                <Resource 
35                    name="Post" 
36                    list={PostList} 
37                    edit={PostEdit} 
38                    create={PostCreate} 
39                    show={PostShow} 
40                />
41            </Admin>
42        );
43    }
44}
45
46export default App;