{"id":15568783,"url":"https://github.com/weakky/ra-data-opencrud","last_synced_at":"2025-04-07T19:15:09.970Z","repository":{"id":32976853,"uuid":"145546218","full_name":"Weakky/ra-data-opencrud","owner":"Weakky","description":"A react-admin data provider for Prisma and GraphCMS","archived":false,"fork":false,"pushed_at":"2022-12-09T07:52:45.000Z","size":1273,"stargazers_count":160,"open_issues_count":64,"forks_count":45,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-31T18:21:42.674Z","etag":null,"topics":["graphcms","graphql","opencrud","prisma","react-admin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Weakky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-21T10:10:15.000Z","updated_at":"2025-02-06T12:57:38.000Z","dependencies_parsed_at":"2023-01-14T23:00:41.569Z","dependency_job_id":null,"html_url":"https://github.com/Weakky/ra-data-opencrud","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weakky%2Fra-data-opencrud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weakky%2Fra-data-opencrud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weakky%2Fra-data-opencrud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Weakky%2Fra-data-opencrud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Weakky","download_url":"https://codeload.github.com/Weakky/ra-data-opencrud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247713258,"owners_count":20983683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphcms","graphql","opencrud","prisma","react-admin"],"created_at":"2024-10-02T17:20:48.866Z","updated_at":"2025-04-07T19:15:09.933Z","avatar_url":"https://github.com/Weakky.png","language":"TypeScript","readme":"# ra-data-opencrud\n\n*Prisma on steroids*: easily build backoffices with Prisma/GraphCMS plugged on `react-admin`!\n\n### Work in progress\nIf you wanna give it a try anyway, here's a quick preview on codesandbox.\nThe API is hosted on Prisma's public servers, which means the API is limited to 10 API calls per seconds.\nBe aware that it might not be working because of that, or that performances may be poor.\n\n[![Edit ra-data-prisma](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/Weakky/ra-data-prisma/tree/master/examples/prisma-ecommerce)\n\n# Summary\n\n- [What is react admin ? And what's that ?](#what-is-react-admin-?-and-what's-ra-data-opencrud-?)\n- [Installation](#installation)\n- [Usage](#installation)\n- [Options](#options)\n- [Tips and workflow](#tips-and-workflow)\n- [Contributing](#contributing)\n\n## What is react admin ? And what's ra-data-opencrud ?\n\n[Find out more about the benefits of using `react-admin` with Prisma here.](context.md) \n\n## Installation\n\nInstall with:\n\n```sh\nnpm install --save graphql ra-data-opencrud\n```\n\nor\n\n```sh\nyarn add graphql ra-data-opencrud\n```\n\n## Usage\n\nThis example assumes a `Post` type is defined in your datamodel.\n\n```js\n// in App.js\nimport React, { Component } from 'react';\nimport buildOpenCrudProvider from 'ra-data-opencrud';\nimport { Admin, Resource, Delete } from 'react-admin';\n\nimport { PostCreate, PostEdit, PostList } from './posts';\n\nconst client = new ApolloClient();\n\nclass App extends Component {\n    constructor() {\n        super();\n        this.state = { dataProvider: null };\n    }\n    componentDidMount() {\n        buildOpenCrudProvider({ clientOptions: { uri: 'your_prisma_or_graphcms_endpoint' }})\n            .then(dataProvider =\u003e this.setState({ dataProvider }));\n    }\n\n    render() {\n        const { dataProvider } = this.state;\n\n        if (!dataProvider) {\n            return \u003cdiv\u003eLoading\u003c/div\u003e;\n        }\n\n        return (\n            \u003cAdmin dataProvider={dataProvider}\u003e\n                \u003cResource name=\"Post\" list={PostList} edit={PostEdit} create={PostCreate} remove={Delete} /\u003e\n            \u003c/Admin\u003e\n        );\n    }\n}\n\nexport default App;\n```\n\nAnd that's it, `buildOpenCrudProvider` will create a default ApolloClient for you and run an [introspection](http://graphql.org/learn/introspection/) query on your Prisma/GraphCMS endpoint, listing all potential resources.\n\n## Options\n\n### Customize the Apollo client\n\nYou can either supply the client options by calling `buildOpenCrudProvider` like this:\n\n```js\nbuildOpenCrudProvider({ clientOptions: { uri: 'your_prisma_or_graphcms_endpoint', ...otherApolloOptions } });\n```\n\nOr supply your client directly with:\n\n```js\nbuildOpenCrudProvider({ client: myClient });\n```\n\n### Overriding a specific query\n\nThe default behavior might not be optimized especially when dealing with references. You can override a specific query by decorating the `buildQuery` function:\n\n#### With a whole query\n\n```js\n// in src/dataProvider.js\nimport buildOpenCrudProvider, { buildQuery } from 'ra-data-opencrud';\n\nconst enhanceBuildQuery = introspection =\u003e (fetchType, resource, params) =\u003e {\n    const builtQuery = buildQuery(introspection)(fetchType, resource, params);\n\n    if (resource === 'Command' \u0026\u0026 fetchType === 'GET_ONE') {\n        return {\n            // Use the default query variables and parseResponse\n            ...builtQuery,\n            // Override the query\n            query: gql`\n                query Command($id: ID!) {\n                    data: Command(id: $id) {\n                        id\n                        reference\n                        customer {\n                            id\n                            firstName\n                            lastName\n                        }\n                    }\n                }`,\n        };\n    }\n\n    return builtQuery;\n}\n\nexport default buildOpenCrudProvider({ buildQuery: enhanceBuildQuery })\n```\n\n#### Or using fragments\n\nYou can also override a query using the same API `graphql-binding` offers.\n\n`buildQuery` accept a fourth parameter which is a fragment that will be used as the final query.\n\n```js\n// in src/dataProvider.js\nimport buildOpenCrudProvider, { buildQuery } from 'ra-data-opencrud';\n\nconst enhanceBuildQuery = introspection =\u003e (fetchType, resource, params) =\u003e {\n    if (resource === 'Command' \u0026\u0026 fetchType === 'GET_ONE') {\n        // If you need auto-completion from your IDE, you can also use gql and provide a valid fragment\n        return buildQuery(introspection)(fetchType, resource, params, `{\n            id\n            reference\n            customer { id firstName lastName }\n        }`);\n    }\n\n    return buildQuery(introspection)(fetchType, resource, params);\n}\n\nexport default buildOpenCrudProvider({ buildQuery: enhanceBuildQuery })\n```\n\nAs this approach can become really cumbersome, you can find a more elegant way to pass fragments in the example under `/examples/prisma-ecommerce` \n\n### Customize the introspection\n\nThese are the default options for introspection:\n\n```js\nconst introspectionOptions = {\n    include: [], // Either an array of types to include or a function which will be called for every type discovered through introspection\n    exclude: [], // Either an array of types to exclude or a function which will be called for every type discovered through introspection\n}\n\n// Including types\nconst introspectionOptions = {\n    include: ['Post', 'Comment'],\n};\n\n// Excluding types\nconst introspectionOptions = {\n    exclude: ['CommandItem'],\n};\n\n// Including types with a function\nconst introspectionOptions = {\n    include: type =\u003e ['Post', 'Comment'].includes(type.name),\n};\n\n// Including types with a function\nconst introspectionOptions = {\n    exclude: type =\u003e !['Post', 'Comment'].includes(type.name),\n};\n```\n\n**Note**: `exclude` and `include` are mutualy exclusives and `include` will take precendance.\n\n**Note**: When using functions, the `type` argument will be a type returned by the introspection query. Refer to the [introspection](http://graphql.org/learn/introspection/) documentation for more information.\n\nPass the introspection options to the `buildApolloProvider` function:\n\n```js\nbuildApolloProvider({ introspection: introspectionOptions });\n```\n\n## Tips and workflow\n\n### Performance issues\nAs react-admin was originally made for REST endpoints, it cannot always take full advantage of GraphQL's benefits.\n\nAlthough `react-admin` already has a load of bult-in optimizations ([Read more here](marmelab.com/blog/2016/10/18/using-redux-saga-to-deduplicate-and-group-actions.html) and [here](https://github.com/marmelab/react-admin/issues/2243)),\nit is not yet well suited when fetching n-to-many relations (multiple requests will be sent).\n\nTo counter that limitation, as shown above, you can override queries to directly provide all the fields that you will need to display your view.\n\n#### Suggested workflow\n\nAs overriding all queries can be cumbersome, **this should be done progressively**.\n\n- Start by using `react-admin` the way you're supposed to (using `\u003cReferenceField /\u003e` and `\u003cReferenceManyField /\u003e` when trying to access references)\n- Detect the hot-spots\n- Override the queries on those hot-spots by providing all the fields necessary (as [shown above](#or-using-fragments))\n- Replace the `\u003cReferenceField /\u003e` by simple fields (such as `\u003cTextField /\u003e`) by accessing the resource in the following way: `\u003cTextField source=\"product.name\" /\u003e`\n- Replace the `\u003cReferenceManyField /\u003e` by `\u003cArrayField /\u003e` using the same technique as above\n\n## Contributing\n\nUse the example under `examples/prisma-ecommerce` as a playground for improving `ra-data-opencrud`.\n\nTo easily enhance `ra-data-opencrud` and get the changes reflected on `examples/prisma-ecommerce`, do the following:\n\n- `cd ra-data-opencrud`\n- `yarn link`\n- `cd examples/prisma-ecommerce`\n- `yarn link ra-data-opencrud`\n\nOnce this is done, the `ra-data-opencrud` dependency will be replaced by the one on the repository.\n**One last thing, don't forget to transpile the library with babel by running the following command on the root folder**\n\n\n```sh\nyarn watch\n```\n\nYou should now be good to go ! Run the tests with this command:\n\n```sh\njest\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweakky%2Fra-data-opencrud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweakky%2Fra-data-opencrud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweakky%2Fra-data-opencrud/lists"}