Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default (buildGraphQLProvider)
✓ import buildGraphQLProvider from 'ra-data-graphql'
✗ import { buildGraphQLProvider } from 'ra-data-graphql'
The package exports a default function, not a named export. Common mistake is to use named import.
ApolloClient
✓ import { ApolloClient } from '@apollo/client'
✗ import { ApolloClient } from 'ra-data-graphql'
ApolloClient is not re-exported from ra-data-graphql; it must be imported from '@apollo/client' separately.
gql
✓ import { gql } from 'graphql-tag'
✗ import { gql } from 'ra-data-graphql'
gql is not part of ra-data-graphql; it is typically used with Apollo Client via graphql-tag.
Shows how to build a GraphQL data provider using introspection and custom buildQuery, with Apollo Client.
import buildGraphQLProvider from 'ra-data-graphql';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { Admin, Resource } from 'react-admin';
import { PostList, PostEdit, PostCreate } from './posts';
const client = new ApolloClient({
uri: process.env.REACT_APP_GRAPHQL_URI || 'http://localhost:4000/graphql',
cache: new InMemoryCache(),
});
const buildQuery = introspectionResults => {
// Custom logic to map react-admin requests to GraphQL queries
return (fetchType, resource, params) => {
// Example: return query for GET_LIST
return {
query: gql`
query GetPostList($page: Int, $perPage: Int) {
posts(page: $page, perPage: $perPage) {
id
title
}
}
`,
variables: { page: params.pagination.page, perPage: params.pagination.perPage },
parseResponse: response => ({
data: response.data.posts,
total: response.total,
}),
};
};
};
const App = () => {
const [dataProvider, setDataProvider] = useState(null);
useEffect(() => {
buildGraphQLProvider({ client, buildQuery }).then(provider =>
setDataProvider(() => provider)
);
}, []);
if (!dataProvider) return <div>Loading...</div>;
return (
<Admin dataProvider={dataProvider}>
<Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} />
</Admin>
);
};
Errors
Common errors & fixes
TypeError: Cannot read property 'data' of undefined
The buildQuery parseResponse expects data in a certain structure, but the GraphQL response doesn't match.
fixCheck the GraphQL response and adjust parseResponse to match the actual data shape. Ensure the query returns the expected fields.
Module not found: Can't resolve 'graphql-tag'
Missing graphql-tag dependency when using gql template literal.
fixInstall graphql-tag: npm install graphql-tag
Invariant Violation: The 'client' option is required to use GraphQLProvider
No ApolloClient instance was provided to buildGraphQLProvider.
fixCreate an ApolloClient instance and pass it in the options: buildGraphQLProvider({ client }) Audit
Dependencies
graphqlrequiredpeer dependency
ra-corerequiredpeer dependency