CODEWITHSUNDEEP
graphqlreact-adminhasura
Scholle
Scholle

Reputation: 1521

How to integrate react admin components in some arbitrary react app?

React admin is a great tool and I want to integrate parts of it, e.g. list views, in some react app which is not a react admin app at the root level.

I created a functional component and just returned react admin wrapper (had to add it coz i didn't find a way to register a dataProvider) with one resource:

return(
  <Admin dataProvider={resolvedDataProvider}>
    <Resource name="nameOfGraphQLQuery" list={SomeList} />
  </Admin>
)

When rendering the component, it says "Not found: Either you typed a wrong URL, or you followed a bad link.." I guess this is due to the fact that react admin renders views based on url paths.

Is it possible to decouple rendering of a resource from url path?

Ideally I would just reuse SomeList component, register a data provider and skip Admin and Resource.

Upvotes: 1

Views: 711

Answers (2)

Anirudh
Anirudh

Reputation: 682

As per React-admin's documentation, incorporating <Admin> and <Resource> (Documentation Link) is completely optional.

The <Admin> tag is a neat way to get your react-admin app up and running quickly.

What you are probably looking for is going at the Custom App route. This link clearly specifies on how to go around the <Admin> component.

const App = () => (
    <Provider
        store={createAdminStore({
            authProvider,
            dataProvider,
            history,
        })}
    >
       <AuthContext.Provider value={authProvider}>
       <DataProviderContext.Provider value={dataProvider}>
       </DataProviderContext.Provider>
       </AuthContext.Provider>
    </Provider>
);

export default withContext(
   {
       authProvider: PropTypes.object,
   },
   () => ({ authProvider })
)(App);

Note that this example still uses <Resource>, because this component lazily initializes the store for the resource data.

If you intend to use React-Admin components, then this seems to be the way to go.

Another thing to note is the fact that React-Admin at the very core is closely associated with Material UI. So you can definitely make use of Material UI.

For example : you can use the List component. These are easy to use and can be very easily plugged in your existing react-app. The documentation is also great and provided with many CodeSandBox example.

The guide also specifies the steps and measures taken to provide flexibility and how to start incorporating in your project.

As someone who has worked on similar lines in my organizations' enterprise project. This proved to be helpful because it gave us the ability to plug and play more easily instead of following the rigidity that React-Admin provides.

Upvotes: 3

John McCabe
John McCabe

Reputation: 712

You could try wrapping your resource in a <DataProviderContext.Provider value={dataProvider}> per https://marmelab.com/react-admin/CustomApp.html

Upvotes: 0

Related Questions