{"_id":"@davidrouyer/gatsby-source-custom-api","_rev":"2-9e96849b6378e948d6678c0d7a4dfd0c","name":"@davidrouyer/gatsby-source-custom-api","dist-tags":{"latest":"2.4.0"},"versions":{"2.3.0":{"name":"@davidrouyer/gatsby-source-custom-api","version":"2.3.0","description":"Source data from any API and transform it into Gatsby-nodes. Download your image files and use them with Gatsby Image.","main":"index.js","author":{"name":"Andreas Faust"},"license":"ISC","repository":{"type":"git","url":"git+https://github.com/AndreasFaust/gatsby-source-custom-api.git"},"keywords":["gatsby","gatsby-plugin","source","api","json","image","cache"],"scripts":{"release:major":"changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags","release:minor":"changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags","release:patch":"changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"},"dependencies":{"gatsby-source-filesystem":"^3.0.0","node-fetch":"^2.6.1","uuid":"^8.3.2"},"devDependencies":{"generate-changelog":"^1.8.0"},"gitHead":"18aaf3466be1ce385b94aebae8b97685a925cbd7","bugs":{"url":"https://github.com/AndreasFaust/gatsby-source-custom-api/issues"},"homepage":"https://github.com/AndreasFaust/gatsby-source-custom-api#readme","_id":"@davidrouyer/gatsby-source-custom-api@2.3.0","_nodeVersion":"15.11.0","_npmVersion":"7.6.0","dist":{"integrity":"sha512-kbWpiRSOG7S6u4sN5jgVILZS92DcZYLjr5AiEfUmcFqv0PoUZNCkDcWKVe/keJiC4PZXbIddctqShrCgvlIM5w==","shasum":"18361cfd11728d5cbb595c99b4a51e32d1c35c5d","tarball":"https://registry.npmjs.org/@davidrouyer/gatsby-source-custom-api/-/gatsby-source-custom-api-2.3.0.tgz","fileCount":16,"unpackedSize":38265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqMtCRA9TVsSAnZWagAASAMP/1+/JxU94q5is8N2pih0\n3PSGf4X7sgcdxBjsd53ImF3Js6Pkv/n+x7jPTkHtt30YL76xOXy5rdfGgzhz\nPybHlD52lJ6vJJwqY1G19BKCDWv7HEYBwzELpCLw+8H0kyGWgI/yRJXGPzSU\nueRYFKWiMnDmF5ufU+/NyU2sSebTZmhiBh2+JhjtwrXef+5dbHSjoxeKnvxB\nbnFUD+4ZrK42zscq5W3XIvCWpjwPm/FFAP8psPI/a6S+YwXimfW2gzNK5HxR\n/eDIAwTRbrJMUIcU3lvNJPr14OytmQNWEM4Qvp6r/TNiXPJ2+SJqJ1nS19/U\nrCMT4/6erBNEGIJdLrYek/Vu/KJPTGE4obRBgfJzsoKUDd1eC4itfrilTTzb\n/RYe2/JbJxMhqsHTwDgSlBxOALZ/wh5H4/aI/qAWlHGmwOEALSGqwSpss+4B\nRLvMClJ7hjyuoHhx67lGvWbjS7zQWQu7F/UQHByqzfhHG2m8Ed/xZqFxj4hc\n/CDrVQvFmZNWPHzJndUQF5sUt1qa8dTuE5LTaOdpmSJjq0t95l/d/f7Zdw0C\nAFYg4w4J2F7brFwB65GrjmX+Vu1t+wmL7NnZlZnhjWh+xT3AfBvYK37vm9Ra\nsuBoDTRQs3zWPfGl73Vk95f+N2bkXSXv+ZKTXqdC2BHWRbLPsYjkdoZosnUW\n2nRx\r\n=Yz5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAm+/Y6gHXmicKq4119NLL9WYfZRsFFEWHbaaOlb/h66AiEA0D6aFI6rdHhzdeiFF7+CVu/XxyEPC22FCZ68HMITgOQ="}]},"_npmUser":{"name":"davidrouyer","email":"rouyer.david@gmail.com"},"directories":{},"maintainers":[{"name":"davidrouyer","email":"rouyer.david@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-source-custom-api_2.3.0_1615242028931_0.8597657490150994"},"_hasShrinkwrap":false},"2.4.0":{"name":"@davidrouyer/gatsby-source-custom-api","version":"2.4.0","description":"Source data from any API and transform it into Gatsby-nodes. Download your image files and use them with Gatsby Image.","main":"index.js","author":{"name":"David Rouyer"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/AndreasFaust/gatsby-source-custom-api.git"},"keywords":["gatsby","gatsby-plugin","source","api","json","image","cache"],"scripts":{"release:major":"changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major && git push origin && git push origin --tags","release:minor":"changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags","release:patch":"changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"},"dependencies":{"gatsby-source-filesystem":"^3.3.0","lodash":"^4.17.21","node-fetch":"^2.6.1","uuid":"^8.3.2"},"devDependencies":{"generate-changelog":"^1.8.0"},"gitHead":"29275cbccbea909d00402929a8cbd099d36933e3","bugs":{"url":"https://github.com/AndreasFaust/gatsby-source-custom-api/issues"},"homepage":"https://github.com/AndreasFaust/gatsby-source-custom-api#readme","_id":"@davidrouyer/gatsby-source-custom-api@2.4.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-5vb7F5BIJUkrWaAipqjOOdJPOAcV/LDFP4AbRfnIw1EGoQEu+2NGpCaM8BVpHXMyspKGyPLA44aS7TvR9VOXDQ==","shasum":"a10717dd1bd8b19eb2e843f0b299d657c9dc4649","tarball":"https://registry.npmjs.org/@davidrouyer/gatsby-source-custom-api/-/gatsby-source-custom-api-2.4.0.tgz","fileCount":15,"unpackedSize":37550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfwXECRA9TVsSAnZWagAAOckQAKQLg6ddFP+ISGPNU4PO\nim3EJ650C1QdqzrNGTsVGTPRGpPGYWWjyJn5h3rPYjHid4rmIhm9xjRn80vw\n5g0ZX2Lgf2Fchcq355Fn/lI6fhqsMU4OgiWwhxpdcpTY5imdV+lNy44RtdGA\ntBssftt5uDc6utHGs95JCUT6Bd5K/9XlhZl1d/QPoO8sNxQHU/kkuRn27iNW\nM+95m5aPrv24hfL93ktWQRWzoNmaqdTTbbkQZXTsBmmXCGPH9HKy5xmxgNaI\n9N7Y2FXYMzn9DOyD8xD9WOH2PAzYI/5iMZZZUwglSfvz7xAz//mjieYLYcEB\nD1yixyao4HlSI+aUTxPKwFFYMRWn4X9fG3WguGztxo6hSw/KckWxUqzEjsC+\nrW5QCwxdHLqfPidra+eEtVnVYr4t6q9s6B3ycmxvwejmn35pDnAlX2ILmSVE\nztfXdjefxR1GkA+yb62WBZIvNZfHt/v1KfKYlge6Gi6K/2o0cQb9cBQZu753\nftcCsaO/PFVpUOoPaUkVFKp3BzR7rqsCbKEOgr2spp0Ad7eVgnkPMiKFR56+\ntaLVZAnbvBkIHNc/IEnfiFsIaY6xknVj0i/HR0y5V9nvXP3HOtQYpA/WtnMM\noEByWr3gh91yQ2D7yFhLUtCNzwZFCj6HWcLjb2CpOa2VjR1ytxCw899lniLB\n9sce\r\n=elqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPY43o64bQScf1PQ5YK+JUpIAlSeHcSsi96Tz5aymcFQIhAObUZRvohpvK9uXfMgsMEpAmQeSApen+Ucxxh6YfHk+8"}]},"_npmUser":{"name":"davidrouyer","email":"rouyer.david@gmail.com"},"directories":{},"maintainers":[{"name":"davidrouyer","email":"rouyer.david@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-source-custom-api_2.4.0_1618937283417_0.7664778098387393"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-08T22:20:28.885Z","2.3.0":"2021-03-08T22:20:29.097Z","modified":"2022-04-05T03:06:15.002Z","2.4.0":"2021-04-20T16:48:03.555Z"},"maintainers":[{"name":"davidrouyer","email":"rouyer.david@gmail.com"}],"description":"Source data from any API and transform it into Gatsby-nodes. Download your image files and use them with Gatsby Image.","homepage":"https://github.com/AndreasFaust/gatsby-source-custom-api#readme","keywords":["gatsby","gatsby-plugin","source","api","json","image","cache"],"repository":{"type":"git","url":"git+https://github.com/AndreasFaust/gatsby-source-custom-api.git"},"author":{"name":"David Rouyer"},"bugs":{"url":"https://github.com/AndreasFaust/gatsby-source-custom-api/issues"},"license":"MIT","readme":"![Logo of gatsby-source-custom-api](https://github.com/andreasfaust/gatsby-source-custom-api/raw/master/gatsby-source-custom-api-logo.png)\n\n**gatsby-source-custom-api** helps you sourcing data from any API and transform it into Gatsby nodes. Define keys you want to be transformed into image-nodes and use them with **[Gatsby Image](https://www.gatsbyjs.org/packages/gatsby-image/)**.\n\n## Getting Started\n\n1. Install the package with **yarn** or **npm**\n\n`yarn add gatsby-source-custom-api`\n\n2. Add to plugins in your gatsby-config.js\n\n```javascript\nmodule.exports = {\n    plugins: [\n        {\n            resolve: \"gatsby-source-custom-api\",\n            options: {\n                url: \"www.my-custom-api.com\"\n            }\n        }\n    ]\n};\n```\n\n## Options\n\n| **Name**  | **Type**         | **Description**                                                                                                                                                                                         |\n| :-------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| url       | object or string | `Required.` Url of your API as a string. If you have two different APIs for development and production, define an object with the keys `production` and `development`.                                  |\n| headers       | object | Request headers. Format is the identical to that accepted by the Headers constructor. See https://www.npmjs.com/package/node-fetch                                  |\n| rootKey   | string           | `Optional.` Name your API.                                                                                                                                                                              |\n| imageKeys | array            | Define the keys of image objects. These must have a childkey called `url`, which is a string that defines the path to an image file. Gatsby-Images are added as childkey `local`. Default: `['image']`. |\n| schemas   | object           | Define default-schemas for the objects of your API. See \"Provide Default Schemas\" for more information.                                                                                                 |\n\n## Provide Default Schemas\n\nYou need to provide default schemas for the arrays and objects of your API to avoid GraphQl-errors. You can provide default schemas via the prop `schemas`. More information: [https://graphql.org/learn/schema/](https://graphql.org/learn/schema/)\n\n```javascript\n// Lets assume this is the data from your API:\nconst exampleDataFromApi = [\n    {\n        url: \"post-1\",\n        images: [\n            {\n                url: \"image-1.jpg\",\n                modified: 1556752476267\n            },\n            {\n                url: \"image-2.jpg\",\n                modified: 1556752702168\n            }\n        ],\n        author: {\n            firstname: \"John\",\n            lastname: \"Doe\"\n        }\n    }\n];\n\n// This is the content of your gatsby-config.js\n// and what you need to provide as schema:\nmodule.exports = {\n    plugins: [\n        {\n            resolve: \"gatsby-source-custom-api\",\n            options: {\n                url: {\n                    development: \"http://my-local-api.dev\", // on \"gatsby develop\"\n                    production: \"https://my-remote-api.com\" // on \"gatsby build\"\n                },\n                imageKeys: [\"images\"],\n                rootKey: \"posts\",\n                schemas: {\n                    posts: `\n                        url: String\n                        images: [images]\n                        author: author\n                    `,\n                    images: `\n                        url: String\n                        modified: Int\n                    `,\n                    author: `\n                        firstname: String\n                        lastname: String\n                    `\n                }\n            }\n        }\n    ]\n};\n```\n\n## Multiple Sources? Multiple Instances!\n\nIf you have multiple sources for your API in your project, just instantiate the plugin multiple times. Just be sure to set a different `rootKey` for every instance. \n\n**Connect different APIs**\nYou can connect the different APIs with `@link`. Find out more about this at https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields.\n\n```javascript\nmodule.exports = {\n    plugins: [\n        {\n            resolve: \"gatsby-source-custom-api\",\n            options: {\n                url: \"https://my-first-api.com\",\n                rootKey: 'authors',\n                schemas:  {\n                    authors: `\n                        name: String\n                        description: String\n                    `\n                }\n            }\n        },\n        {\n            resolve: \"gatsby-source-custom-api\",\n            options: {\n                url: \"https://my-second-api.com\",\n                rootKey: 'posts',\n                schemas:  {\n                    posts: `\n                        text: String\n                        authors: authors @link(by: \"name\")\n                    `\n                }\n            }\n        }\n    ]\n};\n```\n\n## Images\n\n`Gatsby Source Custom API` automatically downloads your image-files, so you can use them with **[Gatsby Image](https://www.gatsbyjs.org/packages/gatsby-image/)**.\n\n#### How does it recognize images?\n\nThe default key for images is `image`. You can also define your own image keys with the option `imageKeys`. Images have to be objects containing a childkey called `url`, which is a string that defines the path to an image file. Gatsby-Images are added as childkey `local`.\n\n#### What about Caching?\n\nIf your image object provides a key called `modified`, this key gets cached and compared every time you build or develop. If it stays the same, the already downloaded version of the image-file is used.\n\n## Transform Nodes to Pages\n\nThis is an example of how you use the required nodes to automatically generate pages: Insert the following code into the file `gatsby-node.js`. The sample key here is an array called `posts`. All array-elements can be required in GraphQl via `allPosts`. In this example the posts have a child-key called \"url\", which defines their path and serves as marker to find them in your matching React-component (`pages/post.js`).\n\n```javascript\nconst path = require(\"path\");\n\nexports.createPages = async ({ graphql, actions }) => {\n    const { createPage } = actions;\n    const result = await graphql(`\n        {\n            allPosts {\n                nodes {\n                    url\n                }\n            }\n        }\n    `);\n    return Promise.all(\n        result.data.allPosts.nodes.map(async node => {\n            await createPage({\n                path: node.url,\n                component: path.resolve(\"./src/pages/post.js\"),\n                context: {\n                    // Data passed to context is available\n                    // in page queries as GraphQL variables.\n                    url: node.url\n                }\n            });\n        })\n    );\n};\n```\n\nIn your `pages/post.js` you can require the data like so:\n\n```jsx\nimport React from \"react\";\nimport { graphql } from \"gatsby\";\n\nconst Post = ({ data }) => {\n    return <h1>{data.posts.title}</h1>;\n};\n\nexport const query = graphql`\n    query($url: String) {\n        posts(url: { eq: $url }) {\n            url\n            title\n            image {\n                local {\n                    childImageSharp {\n                        fluid(maxWidth: 2000) {\n                            ...GatsbyImageSharpFluid_withWebp\n                        }\n                    }\n                }\n                alttext\n            }\n        }\n    }\n`;\n\nexport default Post;\n```\n\n## Replace conflicting Keys\n\nSome of the returned keys may be transformed, if they conflict with restricted keys used for GraphQL such as the following `['id', 'children', 'parent', 'fields', 'internal']`. These conflicting keys will now show up as `[key]_normalized`. (Thanks to [gatsby-source-apiserver](https://github.com/thinhle-agilityio/gatsby-source-apiserver))\n\n## Contributing\n\nEvery contribution is very much appreciated.\nFeel free to file bugs, feature- and pull-requests.\n\n❤️ If this plugin is helpful for you, star it on [GitHub](https://github.com/AndreasFaust/gatsby-source-custom-api).\n","readmeFilename":"README.md"}