React-Admin -- Basic Profile Display App Example

App.js

import React, {Component} from 'react';
import { Admin, Resource } from 'react-admin';
import buildGraphQLProvider from 'ra-data-graphql';
import ApolloClient from 'apollo-boost';

import { buildQuery } from './buildQuery';
import { uri } from './config';

const client = ApolloClient({ uri });

// The source for the TextFields correspond to fieldnames on the resource
const ProfileList = props => (
  <List {...props}>
    <Datagrid>
      <TextField source="name" />
    </DataGrid>
  </List>
);

class App extends Component {
  constructor() {
    super();
    this.state = { dataProvider: null };
  }
  
  componentDidMount() {
    buildGraphQLProvider({ client, buildQuery }).then(dataProvider =>
      this.setState({ dataProvider })
    );
  }
  
  render() {
    const { dataProvider } = this.state;
    
    if (!dataProvider) {
      return <div>Loading</div>;
    }
    
    return (
      <Admin dataProvider={dataProvider}>
        <Resource name="Profile" list={ProfileList} />
      </Admin>
      );
  }
}
export default App;