{"id":23436982,"url":"https://github.com/amplication/ra-data-graphql-amplication","last_synced_at":"2025-06-14T15:06:05.278Z","repository":{"id":42660289,"uuid":"366679727","full_name":"amplication/ra-data-graphql-amplication","owner":"amplication","description":"React-admin data provider to connect to a GraphQL generated by Amplication","archived":false,"fork":false,"pushed_at":"2024-09-11T11:48:47.000Z","size":386,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-13T04:42:27.662Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amplication.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-12T10:37:07.000Z","updated_at":"2022-12-26T18:13:28.000Z","dependencies_parsed_at":"2024-09-11T15:45:18.784Z","dependency_job_id":"8223725a-ba9b-4056-8354-a9c53bb3a3bd","html_url":"https://github.com/amplication/ra-data-graphql-amplication","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amplication/ra-data-graphql-amplication","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amplication%2Fra-data-graphql-amplication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amplication%2Fra-data-graphql-amplication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amplication%2Fra-data-graphql-amplication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amplication%2Fra-data-graphql-amplication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amplication","download_url":"https://codeload.github.com/amplication/ra-data-graphql-amplication/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amplication%2Fra-data-graphql-amplication/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259835390,"owners_count":22918980,"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":[],"created_at":"2024-12-23T13:36:06.174Z","updated_at":"2025-06-14T15:06:05.263Z","avatar_url":"https://github.com/amplication.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ra-data-graphql-amplication\n\nA GraphQL data provider for [react-admin](https://github.com/marmelab/react-admin/)\nbuilt for GraphQL API generated with [Amplication](https://amplication.com)\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Options](#options)\n- [Credits](#credits)\n\n## Installation\n\nInstall with:\n\n```sh\nnpm install --save graphql ra-data-graphql-amplication\n```\n\nor\n\n```sh\nyarn add graphql ra-data-graphql-amplication\n```\n\n## Usage\n\nThe `ra-data-graphql-amplication` package exposes a single function, which is a constructor for a `dataProvider` based on a GraphQL endpoint. When executed, this function calls the GraphQL endpoint, running an [introspection](https://graphql.org/learn/introspection/) query. It uses the result of this query (the GraphQL schema) to automatically configure the `dataProvider` accordingly.\n\n```ts\n// in graphqlDataProvider.ts\nimport buildGraphQLProvider from 'ra-data-graphql-amplication';\nimport { ApolloClient } from 'apollo-client';\nimport { createHttpLink } from 'apollo-link-http';\nimport { setContext } from 'apollo-link-context';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\n\nconst httpLink = createHttpLink({\n  //@todo: get the url from a configuration file\n  uri: 'http://localhost:3000/graphql',\n});\n\nconst authLink = setContext((_, { headers }) =\u003e {\n  //@todo: get the authentication token from local storage\n  const token = 'YWRtaW46YWRtaW4=';\n  return {\n    headers: {\n      ...headers,\n      authorization: token ? `Basic ${token}` : '',\n    },\n  };\n});\n\nconst apolloClient = new ApolloClient({\n  cache: new InMemoryCache(),\n  link: authLink.concat(httpLink),\n});\n\nexport default buildGraphQLProvider({\n  client: apolloClient,\n});\n```\n\n```tsx\n//in app.tsx\nimport React, { useEffect, useState } from 'react';\nimport { Admin, DataProvider, Resource } from 'react-admin';\n\nimport buildGraphQLProvider from './graphqlDataProvider';\nimport basicHttpAuthProvider from './auth-provider/ra-auth-basic-http';\n\nimport './App.css';\nimport Dashboard from './pages/Dashboard';\n\nimport { UserList } from './User/UserList';\nimport { UserEdit } from './User/UserEdit';\nimport { UserCreate } from './User/UserCreate';\n\nfunction App() {\n  const [dataProvider, setDataProvider] = useState\u003cDataProvider | null\u003e(null);\n  useEffect(() =\u003e {\n    buildGraphQLProvider\n      .then((provider) =\u003e {\n        setDataProvider(() =\u003e provider);\n      })\n      .catch((error: any) =\u003e {\n        console.log(error);\n      });\n  }, []);\n  if (!dataProvider) {\n    return \u003cdiv\u003eLoading\u003c/div\u003e;\n  }\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cAdmin\n        title=\"My Admin\"\n        dataProvider={dataProvider}\n        authProvider={basicHttpAuthProvider}\n        dashboard={Dashboard}\n      \u003e\n        \u003cResource\n          name=\"User\"\n          list={UserList}\n          edit={UserEdit}\n          create={UserCreate}\n        /\u003e\n      \u003c/Admin\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Expected GraphQL Schema\n\nThe `ra-data-graphql-amplication` function works against GraphQL servers that was generated with Amplication, or respects its grammar.\n\n## Options\n\n### Customize the Apollo client\n\nYou can either supply the client options by calling `buildGraphQLProvider` like this:\n\n```js\nbuildGraphQLProvider({\n  clientOptions: { uri: 'http://localhost:4000', ...otherApolloOptions },\n});\n```\n\nOr supply your client directly with:\n\n```js\nbuildGraphQLProvider({ client: myClient });\n```\n\n## Credits\n\nThis provider was built on top of the source code of `ra-data-graphql-simple`\n\nhttps://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql-simple\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famplication%2Fra-data-graphql-amplication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famplication%2Fra-data-graphql-amplication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famplication%2Fra-data-graphql-amplication/lists"}