React Admin / building Data Provider via 'ra-data-graphql' library - auto-injected `raFetchType` param is undefined

Viewed 416

I'm trying to create a dataProvider via ra-data-graphql, as described in the library's README, and am successfully passing in the introspection response to the buildQuery method, but the raFetchType param in my buildQuery method is always undefined, and the query mapping that is supposed to happen fails. It appears as though the raFetchType should be populated automatically by the library, or maybe I'm (or the documentation) missing something.

Do I need to provide some extra option when injecting buildCustomQuery into buildGraphQLProvider?

What you were expecting: raFetchType is defined (I'm assuming as one of 'GET_LIST', 'GET_ONE', etc.)

What happened instead: the raFetchType param in buildQuery (called aorFetchType in the library's source code) is always undefined

Related code:

// App.tsx

const [dataProvider, setDataProvider] = useState<DataProvider>();
const cache = new InMemoryCache();
const link = createHttpLink({
  uri: // my graphql API URL
});

const client = new ApolloClient({
  cache: cache,
  link: link,
});

useEffect(() => {
  buildGraphQLProvider({
    client: { client },
    buildQuery: buildCustomQuery,
    introspection: {
      schema, // JSON previously fetched from my GraphQL API
      operationNames: introspectionOperationNames, // function that maps the 'Country' resource to the correct query name for 'GET_LIST'
      include: ['Country'], // just trying it out with a single Resource first
    },
  }).then((dataProvider: any) => {
    setDataProvider(dataProvider);
  })
}, []);
// this is called via `buildGraphQLProvider` on init
export const buildCustomQuery = (introspectionResults: any) => (raFetchType: any, resourceName: any, params: any) => {
   // the introspectionResults contain the 4 properties listed here: https://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql#specify-your-queries-and-mutations
   // including the 'Country' resource with the mapped query name
   // however, `raFetchType` is undefined, and so no query can ever be returned. 
   // I get 'TypeError: Cannot read property 'parseResponse' of undefined' on ra-data-graphql/esm/index.js:113
    const resource = introspectionResults.resources.find((r: IntrospectionResource) => r.type.name === resourceName);
    switch (raFetchType) {
        case 'GET_LIST':
            return {
                query: gql`query ${resource[raFetchType].name}($id: ID) {
                    data: ${resource[raFetchType].name}(id: $id) {
                           ...
                        }
                    }
                }`,
                variables: params, // params = { id: ... }
                parseResponse: (response: any) => response.data,
            }
            break;
        // ... other types handled here
        default:
            return undefined;
    }
}

Environment

  • React-admin version: 3.11.0
  • React version: 17.0.1
  • Browser: Chrome
  • Stack trace: Uncaught (in promise) TypeError: Cannot read property 'parseResponse' of undefined at raDataProvider (index.js:113)
0 Answers
Related