{"_id":"@emrys-myrddin/ra-data-graphql","_rev":"1-a4a3d607d7a5ac51a97fa1549a0b7b71","name":"@emrys-myrddin/ra-data-graphql","dist-tags":{"latest":"3.9.6"},"versions":{"3.9.6":{"name":"@emrys-myrddin/ra-data-graphql","version":"3.9.6","description":"A GraphQL data provider for react-admin","main":"lib/index.js","module":"esm/index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/marmelab/react-admin.git"},"bugs":{"url":"https://github.com/marmelab/react-admin/issues"},"homepage":"https://github.com/marmelab/react-admin#readme","authors":["Gildas Garcia"],"keywords":["reactjs","react","react-admin","admin-on-rest","rest","graphql"],"license":"MIT","scripts":{"build":"yarn run build-cjs && yarn run build-esm","build-cjs":"rimraf ./lib && tsc","build-esm":"rimraf ./esm && tsc --outDir esm --module es2015","watch":"tsc --outDir esm --module es2015 --watch"},"dependencies":{"apollo-client":"^2.6.3","apollo-client-preset":"^1.0.8","graphql-tag":"^2.10.1","lodash":"~4.17.5","pluralize":"~7.0.0"},"peerDependencies":{"graphql":"^14.1.1","ra-core":"^3.9.0"},"devDependencies":{"cross-env":"^5.2.0","graphql":"^14.1.1","rimraf":"^2.6.3"},"_id":"@emrys-myrddin/ra-data-graphql@3.9.6","dist":{"shasum":"5603326ef4cee66fd44d8779087f78f9acb89935","integrity":"sha512-z99HEDA4evOOOHhgTtxcUyb8GEsBcHTxzUZGTCRLF+sB/xhz4eOuZcNWJ2hztbnJv+V7m3bEQFDY4ey1hFJELw==","tarball":"https://registry.npmjs.org/@emrys-myrddin/ra-data-graphql/-/ra-data-graphql-3.9.6.tgz","fileCount":22,"unpackedSize":88463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJft9CJCRA9TVsSAnZWagAAdJ4P/3Rosb+FFz9U4PC4TxKz\n2bn3ESK10X2DYgEez/RbR8nTz93vNJ+m8bAPzs2rw/nFGS6JfSEjS5XNuKIw\nLgwkArq6a7HLN19OIldauBxMygQvKyCrU0pa+pTQQMcgymoWwDcilPb7otLB\nu+vpC0VWgXRPWkYo085XRYIdJrR7y+NlK8IxfiTp+8NWg14UknuUxe1qWONY\nk9ube59QnGOpOvhjRmvYrN72JzMqUZm7XrYe+VCLI3/DcKUoDsuTmAt6skkG\nFYFJfz7rCwFFFbzn4XM5AbcOP5u2dAKjR1mnvNdz4CGXjKCe9Qwnf9eQ9+Ui\n94ZZja1iSQBgX+YD8NOFR5xyUJrQ9nZU7pFtqBFXBc9j59KIm7uS9G31lixK\n4YnPtVUjk5ZWSN2egj1qHtHQEkQ8MPjfe52lkp6zd0VeLbIoOLKoLzzg5bHf\nqXFOp99GubQ+DjSVOggqORQqTtcu8xMY+KZzPkTq1slHfJVkmxQdkoPmAmkc\n5aqyP+Kz5HYhyMfKbEgfiMAJUmPseX7OHMrcefgnNdm9TrY4jSgHgUH3Oang\nhk/lSPxzm2du/TZbe/fGC4CbwlkDI2bu7XN9Zr/kQxNNmcpZe9iu96rqg3mI\nLQXjVMCftE9xRLCWNEWleHNVC5zr+VXgVYaikdD1A/tLehrUr2CiVkevhdxE\nrqgI\r\n=j7/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwxNVNgfvrxWz6PvTKpMhOBt5kAo9LGNkLWdqJiOmfzAiEA0EVwb7txYJUpjD8n8pTRhsZS1Ag5BSSOyY6Ua2HZZ3c="}]},"_npmUser":{"name":"emrys-myrddin","email":"v.cocaud@gmail.com"},"directories":{},"maintainers":[{"name":"emrys-myrddin","email":"v.cocaud@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ra-data-graphql_3.9.6_1605881992774_0.9770071183151152"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-20T14:19:52.724Z","3.9.6":"2020-11-20T14:19:52.933Z","modified":"2022-04-05T07:36:40.066Z"},"maintainers":[{"name":"emrys-myrddin","email":"v.cocaud@gmail.com"}],"description":"A GraphQL data provider for react-admin","homepage":"https://github.com/marmelab/react-admin#readme","keywords":["reactjs","react","react-admin","admin-on-rest","rest","graphql"],"repository":{"type":"git","url":"git+https://github.com/marmelab/react-admin.git"},"bugs":{"url":"https://github.com/marmelab/react-admin/issues"},"license":"MIT","readme":"# ra-data-graphql\n\nA GraphQL data provider for [react-admin](https://github.com/marmelab/react-admin/)\nbuilt with [Apollo](https://www.apollodata.com/)\n\n- [Installation](#installation)\n- [Usage](#installation)\n- [Options](#options)\n\nThis is a very low level library which is not meant to be used directly unless you really want full control or are building a custom GraphQL data provider.\n\nIt provides the foundations for other GraphQL data provider packages such as `ra-data-graphql-simple`\n\n## About GraphQL and Apollo\n\nThis library is meant to be used with Apollo on the **client** side but\nyou're free to use any graphql **server**.\n\n## How does it work?\n\nIn a nutshell, `ra-data-graphql` runs an *introspection query* on your GraphQL API and passes it to your adaptator, along with the *type of query* that is being made (`CREATE`, `UPDATE`, `GET_ONE`, `GET_LIST` etc..) and the *name of the resource* that is being queried.\n\nIt is then the job of ***your*** GraphQL adaptator to craft the GraphQL query that will match your backend conventions, and to provide a function that will parse the response of that query in a way that react-admin can understand.\n\nOnce the query and the function are passed back to `ra-data-graphql`, the actual HTTP request is sent (using [ApolloClient](https://github.com/apollographql/apollo-client)) to your GraphQL API. The response from your backend is then parsed with the provided function and that parsed response is given to `ra-core`, the core of `react-admin`.\n\nBelow is a rough graph summarizing how the data flows:\n\n`ra-core` => `ra-data-graphql` => `your-adaptator` => `ra-data-graphql` => `ra-core`\n\n## Installation\n\nInstall with:\n\n```sh\nnpm install --save graphql ra-data-graphql\n```\n\nor\n\n```sh\nyarn add graphql ra-data-graphql\n```\n\n## Usage\n\n```jsx\n// in App.js\nimport * as React from 'react';\nimport { Component } from 'react';\nimport buildGraphQLProvider from 'ra-data-graphql';\nimport { Admin, Resource, Delete } from 'react-admin';\n\nimport buildQuery from './buildQuery'; // see Specify your queries and mutations section below\nimport { PostCreate, PostEdit, PostList } from '../components/admin/posts';\n\nclass App extends Component {\n    constructor() {\n        super();\n        this.state = { dataProvider: null };\n    }\n    componentDidMount() {\n        buildGraphQLProvider({ buildQuery })\n            .then(dataProvider => this.setState({ dataProvider }));\n    }\n\n    render() {\n        const { dataProvider } = this.state;\n\n        if (!dataProvider) {\n            return <div>Loading</div>;\n        }\n\n        return (\n            <Admin dataProvider={dataProvider}>\n                <Resource name=\"Post\" list={PostList} edit={PostEdit} create={PostCreate} />\n            </Admin>\n        );\n    }\n}\n\nexport default App;\n```\n\n## Options\n\n### Customize the Apollo client\n\nYou can specify the client options by calling `buildGraphQLProvider` like this:\n\n```js\nimport { createNetworkInterface } from 'react-apollo';\n\nbuildGraphQLProvider({\n    client: {\n        networkInterface: createNetworkInterface({\n            uri: 'http://api.myproduct.com/graphql',\n        }),\n    },\n});\n```\n\nYou can pass any options supported by the [ApolloClient](https://www.apollographql.com/docs/react/api/core/ApolloClient/) constructor with the addition of `uri` which can be specified so that we create the network interface for you.\n\nYou can also supply your own [ApolloClient](https://www.apollographql.com/docs/react/api/core/ApolloClient/) instance directly with:\n\n```js\nbuildGraphQLProvider({ client: myClient });\n```\n\n### Introspection Options\n\nInstead of running an introspection query you can also provide the introspection query result directly. This speeds up the initial rendering of the `Admin` component as it no longer has to wait for the introspection query request to resolve.\n\n```js\nimport { __schema as schema } from './schema';\n\nbuildGraphQLProvider({\n    introspection: { schema }\n});\n```\n\nThe `./schema` file is a `schema.json` in `./src` retrieved with [`get-graphql-schema --json <graphql_endpoint>`](https://github.com/graphcool/get-graphql-schema).\n\n> Note: Importing the `schema.json` file will significantly increase the bundle size.\n\n## Specify your queries and mutations\n\nFor the provider to know how to map react-admin request to apollo queries and mutations, you must provide a `buildQuery` option. The `buildQuery` is a factory function which will be called with the introspection query result.\n\nThe introspection result is an object with 4 properties:\n\n- `types`: an array of all the GraphQL types discovered on your endpoint\n- `queries`: an array of all the GraphQL queries and mutations discovered on your endpoint\n- `resources`: an array of objects with a `type` property, which is the GraphQL type for this resource, and a property for each react-admin fetch verb for which we found a matching query or mutation\n- `schema`: the full schema\n\nFor example:\n\n```js\n{\n    types: [\n        {\n            name: 'Post',\n            kind: 'OBJECT',\n            fields: [\n                { name: 'id', type: { kind: 'NON_NULL', ofType: { kind: 'SCALAR', name: 'ID' } } },\n                { name: 'title', type: { kind: 'NON_NULL', ofType: { kind: 'SCALAR', name: 'String' } } },\n                ...\n            ]\n        },\n        ...\n    ],\n    queries: [\n        {\n            name: 'createPost',\n            args: [\n                { name: 'title', type: { kind: 'NON_NULL', ofType: { kind: 'SCALAR', name: 'String' } } }\n            ],\n            type : { kind: 'OBJECT', name: 'Category' }\n        },\n        ...\n    ],\n    resources: [\n        {\n            type: {\n                name: 'Post',\n                kind: 'OBJECT',\n                fields: [\n                    { name: 'id', type: { kind: 'NON_NULL', ofType: { kind: 'SCALAR', name: 'ID' } } },\n                    { name: 'title', type: { kind: 'NON_NULL', ofType: { kind: 'SCALAR', name: 'String' } } },\n                    ...\n                ]\n            },\n            GET_LIST: {\n                name: 'createPost',\n                args: [\n                    { name: 'title', type: { kind: 'NON_NULL', ofType: { kind: 'SCALAR', name: 'String' } } }\n                ],\n                type : { kind: 'OBJECT', name: 'Category' }\n            },\n            ...\n        }\n    ],\n    schema: {} // Omitting for brevity\n}\n```\n\nThe `buildQuery` function must return a function which will be called with the same parameters as the react-admin data provider, but must return an object matching the `options` of the ApolloClient [query](http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query) method with an additional `parseResponse` function.\n\nThis `parseResponse` function will be called with an [ApolloQueryResult](http://dev.apollodata.com/core/apollo-client-api.html#ApolloQueryResult) and must return the data expected by react-admin.\n\nFor example:\n\n```js\nimport buildFieldList from './buildFieldList';\n\nconst buildQuery = introspectionResults => (raFetchType, resourceName, params) => {\n    const resource = introspectionResults.resources.find(r => r.type.name === resourceName);\n\n    switch (raFetchType) {\n        case 'GET_ONE':\n            return {\n                query: gql`query ${resource[raFetchType].name}($id: ID) {\n                    data: ${resource[raFetchType].name}(id: $id) {\n                        ${buildFieldList(introspectionResults, resource, raFetchType)}\n                    }\n                }`,\n                variables: params, // params = { id: ... }\n                parseResponse: response => response.data,\n            }\n            break;\n        // ... other types handled here\n    }\n}\n```\n\n```js\nbuildGraphQLProvider({ buildQuery });\n```\n\n## Troubleshooting\n\n## When I create or edit a resource, the list or edit page does not refresh its data\n\n`react-admin` maintain its own cache of resources data but, by default, so does the Apollo client. For every queries, we inject a default [`fetchPolicy`](http://dev.apollodata.com/react/api-queries.html#graphql-config-options-fetchPolicy) set to `network-only` so that the Apollo client always refetch the data when requested.\n\nDo not override this `fetchPolicy`.\n\n## Contributing\n\nRun the tests with this command:\n\n```sh\nmake test\n```\n","readmeFilename":"README.md"}