Merge pull request #9820 from marmelab/simplify-gql-providers

Simplify GQL dataProviders
marmelab · May 3, 2024 · b31f93c · b31f93c
2 parents 19a9f22 + b56bacb
commit b31f93c
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 90 deletions.
diff --git a/docs/Upgrade.md b/docs/Upgrade.md
@@ -1058,6 +1058,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 <div>Loading < /div>;
+-    }
+
+    return (
+        <Admin dataProvider={dataProvider} >
+            <Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} />
+        </Admin>
+    );
+}
+
+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
@@ -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
@@ -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 <div>Loading < /div>;
-    }
-
-    return (
-        <Admin dataProvider= { dataProvider } >
-            <Resource name="Post" list = { PostList } edit = { PostEdit } create = { PostCreate } />
-        </Admin>
-    );
-}
+const App = () => (
+    <Admin dataProvider={dataProvider} >
+        <Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} />
+    </Admin>
+);
 
 export default App;
 ```

diff --git 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> => {
+): 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<Identifier[]>(
-                                  (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<Identifier[]>(
+                              (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<Identifier[]>(
-                                  (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<Identifier[]>(
+                              (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
@@ -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 <div>Loading</div>;
-    }
-
-    return (
-        <Admin dataProvider={dataProvider}>
-            <Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} />
-        </Admin>
-    );
-}
+const App = () =>  (
+    <Admin dataProvider={dataProvider}>
+        <Resource name="Post" list={PostList} edit={PostEdit} create={PostCreate} />
+    </Admin>
+);
 
 export default App;
 ```

diff --git 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<DataProvider> => {
+const buildGraphQLProvider = (options: Options): DataProvider => {
     const {
         client: clientObject,
         clientOptions,