From b56bacb32177156ef0122db50182ac39a61c3077 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Fri, 3 May 2024 06:39:24 +0200 Subject: [PATCH] Simplify GQL dataProviders --- docs/Upgrade.md | 36 +++++++ examples/demo/src/dataProvider/graphql.ts | 4 +- packages/ra-data-graphql-simple/README.md | 23 ++--- packages/ra-data-graphql-simple/src/index.ts | 99 ++++++++++---------- packages/ra-data-graphql/README.md | 23 ++--- packages/ra-data-graphql/src/index.ts | 5 +- 6 files changed, 100 insertions(+), 90 deletions(-) diff --git a/docs/Upgrade.md b/docs/Upgrade.md index 431177638e2..71ddcf2b4e6 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -971,6 +971,42 @@ export const MyRemoveButton = (props: ButtonProps) => { } ``` +## `ra-data-graphql` And `ra-data-graphql-simple` No Longer Return A Promise + +The Graphql data providers builders used to return a promise that made admins initialization complicated. This is no longer needed. + +```diff +// in App.js +import React from 'react'; +import { Component } from 'react'; +import buildGraphQLProvider from 'ra-data-graphql-simple'; +import { Admin, Resource } from 'react-admin'; + +import { PostCreate, PostEdit, PostList } from './posts'; + ++ const dataProvider = buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000' } }); + +const App = () => { +- const [dataProvider, setDataProvider] = React.useState(null); +- React.useEffect(() => { +- buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000' } }) +- .then(graphQlDataProvider => setDataProvider(() => graphQlDataProvider)); +- }, []); + +- if (!dataProvider) { +- return
Loading < /div>; +- } + + return ( + + + + ); +} + +export default App; +``` + ## Upgrading to v4 If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5. diff --git a/examples/demo/src/dataProvider/graphql.ts b/examples/demo/src/dataProvider/graphql.ts index 458e73edc39..5c5108dfe22 100644 --- a/examples/demo/src/dataProvider/graphql.ts +++ b/examples/demo/src/dataProvider/graphql.ts @@ -112,8 +112,8 @@ const customBuildQuery: BuildQueryFactory = introspectionResults => { }; }; -export default async () => { - const dataProvider = await buildApolloClient({ +export default () => { + const dataProvider = buildApolloClient({ clientOptions: { uri: 'http://localhost:4000/graphql', }, diff --git a/packages/ra-data-graphql-simple/README.md b/packages/ra-data-graphql-simple/README.md index bbbaefd6e15..be7507e5ad9 100644 --- a/packages/ra-data-graphql-simple/README.md +++ b/packages/ra-data-graphql-simple/README.md @@ -36,24 +36,13 @@ import { Admin, Resource } from 'react-admin'; import { PostCreate, PostEdit, PostList } from './posts'; -const App = () => { +const dataProvider = buildGraphQLProvider({ buildQuery }); - const [dataProvider, setDataProvider] = React.useState(null); - React.useEffect(() => { - buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000' } }) - .then(graphQlDataProvider => setDataProvider(() => graphQlDataProvider)); - }, []); - - if (!dataProvider) { - return
Loading < /div>; - } - - return ( - - - - ); -} +const App = () => ( + + + +); export default App; ``` diff --git a/packages/ra-data-graphql-simple/src/index.ts b/packages/ra-data-graphql-simple/src/index.ts index e80bd02d0ca..24be1dee85b 100644 --- a/packages/ra-data-graphql-simple/src/index.ts +++ b/packages/ra-data-graphql-simple/src/index.ts @@ -30,7 +30,7 @@ export default ( buildQuery?: BuildQueryFactory; bulkActionsEnabled?: boolean; } -): Promise => { +): DataProvider => { const { bulkActionsEnabled = false, ...dPOptions } = merge( {}, defaultOptions, @@ -43,55 +43,54 @@ export default ( bulkActionOperationNames ); - return buildDataProvider(dPOptions).then(defaultDataProvider => { - return { - ...defaultDataProvider, - // This provider defaults to sending multiple DELETE requests for DELETE_MANY - // and multiple UPDATE requests for UPDATE_MANY unless bulk actions are enabled - // This can be optimized using the apollo-link-batch-http link - ...(bulkActionsEnabled - ? {} - : { - deleteMany: (resource, params) => { - const { ids, ...otherParams } = params; - return Promise.all( - ids.map(id => - defaultDataProvider.delete(resource, { - id, - previousData: null, - ...otherParams, - }) - ) - ).then(results => { - const data = results.reduce( - (acc, { data }) => [...acc, data.id], - [] - ); + const defaultDataProvider = buildDataProvider(dPOptions); + return { + ...defaultDataProvider, + // This provider defaults to sending multiple DELETE requests for DELETE_MANY + // and multiple UPDATE requests for UPDATE_MANY unless bulk actions are enabled + // This can be optimized using the apollo-link-batch-http link + ...(bulkActionsEnabled + ? {} + : { + deleteMany: (resource, params) => { + const { ids, ...otherParams } = params; + return Promise.all( + ids.map(id => + defaultDataProvider.delete(resource, { + id, + previousData: null, + ...otherParams, + }) + ) + ).then(results => { + const data = results.reduce( + (acc, { data }) => [...acc, data.id], + [] + ); - return { data }; - }); - }, - updateMany: (resource, params) => { - const { ids, data, ...otherParams } = params; - return Promise.all( - ids.map(id => - defaultDataProvider.update(resource, { - id, - data: data, - previousData: null, - ...otherParams, - }) - ) - ).then(results => { - const data = results.reduce( - (acc, { data }) => [...acc, data.id], - [] - ); + return { data }; + }); + }, + updateMany: (resource, params) => { + const { ids, data, ...otherParams } = params; + return Promise.all( + ids.map(id => + defaultDataProvider.update(resource, { + id, + data: data, + previousData: null, + ...otherParams, + }) + ) + ).then(results => { + const data = results.reduce( + (acc, { data }) => [...acc, data.id], + [] + ); - return { data }; - }); - }, - }), - }; - }); + return { data }; + }); + }, + }), + }; }; diff --git a/packages/ra-data-graphql/README.md b/packages/ra-data-graphql/README.md index 1d9ed087345..5673a604222 100644 --- a/packages/ra-data-graphql/README.md +++ b/packages/ra-data-graphql/README.md @@ -51,24 +51,13 @@ import { Admin, Resource } from 'react-admin'; import buildQuery from './buildQuery'; // see Specify your queries and mutations section below import { PostCreate, PostEdit, PostList } from '../components/admin/posts'; -const App = () => { - const [dataProvider, setDataProvider] = useState(null); +const dataProvider = buildGraphQLProvider({ buildQuery }); - useEffect(() => { - buildGraphQLProvider({ buildQuery }) - .then(dataProvider => setDataProvider(dataProvider)); - }, []); - - if (!dataProvider) { - return
Loading
; - } - - return ( - - - - ); -} +const App = () => ( + + + +); export default App; ``` diff --git a/packages/ra-data-graphql/src/index.ts b/packages/ra-data-graphql/src/index.ts index b20ac8b412c..9e5d3425a8a 100644 --- a/packages/ra-data-graphql/src/index.ts +++ b/packages/ra-data-graphql/src/index.ts @@ -127,10 +127,7 @@ export type Options = { watchQuery?: GetWatchQueryOptions; }; -// @FIXME in v5: This doesn't need to be an async method -const buildGraphQLProvider = async ( - options: Options -): Promise => { +const buildGraphQLProvider = (options: Options): DataProvider => { const { client: clientObject, clientOptions,