Cannot read properties of null (reading 'count')

Question

I am new to react-admin and am having issues with wiring up a data provider (ra-data-graphql-simple) with my GraphQL API. I'm getting the following error in a little red box at the bottom of the page:

Cannot read properties of null (reading 'count')

In Google Chrome's dev tools on the Network tab I do see correct results being returned but the total is null:

This is how I am wiring up the Admin, Resource, and buildGraphQLProvider:

const App = () => {
    const [dataProvider, setDataProvider] = React.useState(null);

    React.useEffect(() => {
        buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000' } })
            .then(graphQlDataProvider => setDataProvider(() => graphQlDataProvider));
    }, []);

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

    return (
        <Admin dataProvider= { dataProvider } >
          <Resource name="FacilityFunction" list={ FunctionList } />
      </Admin>
    );
}

Here is my FunctionList component:

import React from 'react'
import { List, Datagrid, TextField, BooleanField } from 'react-admin'

export const FunctionList = (props) => {
    return <List {...props}>
        <Datagrid>
            <TextField source="id"></TextField>
            <TextField source="name"></TextField>
            <TextField source="code"></TextField>
            <BooleanField source="isActive"></BooleanField>
        </Datagrid>
    </List>
};

Here are my dependencies:

  "dependencies": {
    "graphql": "^16.5.0",
    "ra-data-graphql-simple": "^4.0.3",
    "react": "18.1",
    "react-admin": "^4.1.1",
    "react-dom": "18.1"
  }

score 0 · Answer 1 · answered Jun 03 '22 at 16:20

This was resolved by defining a query (on the graphql server side) like what was shown here: apollo graphql schema react-admin beginner.

@react-admin it would be extremely helpful to build out an entire example with both the graphql server requirements and each list, edit, create, and show components that you have started here: https://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql-simple

The way react-admin expects the graphql schema is very opinionated and needs to be explained up-front and very clearly.

Cannot read properties of null (reading 'count')

1 Answers1