{"_id":"@bradleygriffith/gatsby-source-sanity","_rev":"3-087fd7582b9767ae7db9be3ebd47dd12","name":"@bradleygriffith/gatsby-source-sanity","dist-tags":{"latest":"6.0.4-patch2"},"versions":{"6.0.4":{"name":"@bradleygriffith/gatsby-source-sanity","description":"Gatsby source plugin for building websites using Sanity.io as a backend.","version":"6.0.4","author":{"name":"Sanity.io","email":"hello@sanity.io"},"contributors":[{"name":"Henrique Doro","email":"opensource@hdoro.dev"}],"engines":{"node":">=8.0.0"},"repository":{"type":"git","url":"git+https://github.com/sanity-io/gatsby-source-sanity.git"},"homepage":"https://github.com/sanity-io/gatsby-source-sanity#readme","license":"MIT","bugs":{"url":"https://github.com/sanity-io/gatsby-source-sanity/issues"},"keywords":["gatsby","gatsby-plugin","gatsby-source-plugin"],"main":"index.js","types":"lib-es5/index.d.ts","scripts":{"test":"jest","build":"tsc && tsc -t ES5 --outDir lib-es5","format":"prettier --write src/**/*.{ts,tsx}","watch":"tsc --watch","prepublishOnly":"npm run build && npm test"},"dependencies":{"@sanity/client":"^2.0.1","@sanity/image-url":"^0.140.19","@sanity/mutator":"^2.0.1","@types/url-parse":"^1.4.3","axios":"^0.21.0","debug":"^4.2.0","fs-extra":"^9.0.1","get-stream":"^5.1.0","lodash":"^4.17.20","oneline":"^1.0.2","pump":"^3.0.0","rxjs":"^6.6.3","split2":"^3.2.2","through2":"^3.0.1","url-parse":"^1.4.4"},"devDependencies":{"@types/debug":"^4.1.5","@types/fs-extra":"^9.0.2","@types/graphql":"^14.5.0","@types/jest":"^26.0.15","@types/lodash":"^4.14.162","@types/node":"^14.14.3","@types/pump":"^1.0.1","@types/react-dom":"^16.9.9","@types/split2":"^2.1.6","@types/through2":"^2.0.36","eslint":"^7.12.0","eslint-config-prettier":"^6.14.0","eslint-config-sanity":"^1.150.8","gatsby":"^2.24.87","jest":"^26.6.1","prettier":"^2.1.2","ts-jest":"^26.4.2","typescript":"^3.9.5"},"peerDependencies":{"gatsby":"^2.2.0"},"directories":{"lib":"lib","test":"test"},"gitHead":"c529c72cfdb1c6a230c3b53005aa5bffb7038382","_id":"@bradleygriffith/gatsby-source-sanity@6.0.4","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-blmn2w77YYvB+vSRZ6pBaFbmSKYKxlBl8LJca9d3ZwSsivnfRQKeL3HvZeTOfH5h0gT7qoPg/WY8AdmVuyBMMg==","shasum":"edc729185130b1662893a009e16e6e9fa83e7531","tarball":"https://registry.npmjs.org/@bradleygriffith/gatsby-source-sanity/-/gatsby-source-sanity-6.0.4.tgz","fileCount":185,"unpackedSize":382124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrOfCCRA9TVsSAnZWagAAIfUQAKJG16vbXrJZ8EJKErOu\nv885hrLnca3LMLO+v5cr2CiKvvCAA/TYhTNYqtZbXjImo+5Ng61bfiWtaNBr\n6CgJUwQzTyuifi6lVjaNboj/P7iYD+eEnt6GOMAmJTXP47RWIL7DUPnOPXH4\nHom1jZiE+suKMK4y/uh30i+CDJtxEjdqc7nB35FkeKFg3VPaOyUZHoveEb/T\nLYjUuNE67AMGjuALbNkZk7yhGbSreYGkO0jTWY0oRfWX8QGeD4fDy9S8oZtT\nuBH5eFuqtY10+jsyqujVZoUVKmgmkhnJmdgQTlDUVhoE/uV6VC1GJimfww4P\nbACW34PcVcEFJd7CBfL1a49oYmogO8+wNZYF034CtnXWVoLRurTxN/QBv3L5\nHJ1uMeGAP4RItqaTB53JiCgpBveQJIDL/jFptGJukgga5pZDoVasxu9GjB6U\nYtycqXGQO4pQT4zT8wNRTkngGsJ/7tUcKhXCqqaQ0IL0MbIsCdecJIYsEp9D\nEJcweDeYfij1+XTNIaU/LdCzt7Eg9fIcfHd/u+kbDOKMVN4RBjUb36K59266\nkF+DVZSSP76Ac8dTroqoGYkh9ip1b+/liO/mAbRG4F/JZpiaXB8CsTWQoLjg\nudMprCvcNXKH2aDIOapKK01WkP8b8seP7bpJieFwReV8Kc0uFAJpDJEq4lpr\nLaqe\r\n=Lztj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvwnKSZIax6sXraKZgsj129ozg2BWVNiStzMHDjfs5VAiEAlUYxv8m0EedsE+2dkBa9sUcEm+56uYgoDcVd7FBmHJ4="}]},"_npmUser":{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"},"maintainers":[{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-source-sanity_6.0.4_1605167041532_0.7906955424716549"},"_hasShrinkwrap":false},"6.0.4-patched":{"name":"@bradleygriffith/gatsby-source-sanity","description":"Gatsby source plugin for building websites using Sanity.io as a backend.","version":"6.0.4-patched","author":{"name":"Sanity.io","email":"hello@sanity.io"},"contributors":[{"name":"Henrique Doro","email":"opensource@hdoro.dev"}],"engines":{"node":">=8.0.0"},"repository":{"type":"git","url":"git+https://github.com/sanity-io/gatsby-source-sanity.git"},"homepage":"https://github.com/sanity-io/gatsby-source-sanity#readme","license":"MIT","bugs":{"url":"https://github.com/sanity-io/gatsby-source-sanity/issues"},"keywords":["gatsby","gatsby-plugin","gatsby-source-plugin"],"main":"index.js","types":"lib-es5/index.d.ts","scripts":{"test":"jest","build":"tsc && tsc -t ES5 --outDir lib-es5","format":"prettier --write src/**/*.{ts,tsx}","watch":"tsc --watch","prepublishOnly":"npm run build && npm test"},"dependencies":{"@sanity/client":"^2.0.1","@sanity/image-url":"^0.140.19","@sanity/mutator":"^2.0.1","@types/url-parse":"^1.4.3","axios":"^0.21.0","debug":"^4.2.0","fs-extra":"^9.0.1","get-stream":"^5.1.0","lodash":"^4.17.20","oneline":"^1.0.2","pump":"^3.0.0","rxjs":"^6.6.3","split2":"^3.2.2","through2":"^3.0.1","url-parse":"^1.4.4"},"devDependencies":{"@types/debug":"^4.1.5","@types/fs-extra":"^9.0.2","@types/graphql":"^14.5.0","@types/jest":"^26.0.15","@types/lodash":"^4.14.162","@types/node":"^14.14.3","@types/pump":"^1.0.1","@types/react-dom":"^16.9.9","@types/split2":"^2.1.6","@types/through2":"^2.0.36","eslint":"^7.12.0","eslint-config-prettier":"^6.14.0","eslint-config-sanity":"^1.150.8","gatsby":"^2.24.87","jest":"^26.6.1","prettier":"^2.1.2","ts-jest":"^26.4.2","typescript":"^3.9.5"},"peerDependencies":{"gatsby":"^2.2.0"},"directories":{"lib":"lib","test":"test"},"gitHead":"5903e470943fa6620652e3ae5fa2867748d0695f","_id":"@bradleygriffith/gatsby-source-sanity@6.0.4-patched","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-zBWjMke5GAlaR+xvyl5+wTOisZYz7wzOqOZknCfS5/Eei5EOpS22dwCTtuUAMDU1uCuywXvhKCEPZEpm9GCJcQ==","shasum":"90041d04efe9e618b07037b7f143c3c168026959","tarball":"https://registry.npmjs.org/@bradleygriffith/gatsby-source-sanity/-/gatsby-source-sanity-6.0.4-patched.tgz","fileCount":185,"unpackedSize":389351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrPdWCRA9TVsSAnZWagAAW7IP+wRDcDjP6pf1QZf4e5PZ\nrXXIS/dAAp/SsNPakXkpYPMbpmMlc3NwPY2wO0/TvBCFLtF4+OINVdpwOxVT\nDn5if6dFbzbHr8frm7j5uawl66mewDPY6Fa2s94FX9gfH5GwU1wE9i72+mRI\n+iq4zuRmcaxKRzvoGGBVjaE3SDNHuQEkvENTrYUkuHPjM5mzDTne6wufj7FQ\n27N90fDLA1/F1vQRahxZtPXvwC7kV0RoMiorB3TNOAEw/+ZM59Hj14zLXvwM\n2/QidKoHQY3PGrSNwjPqmsmWZuF1CfJaQh1kOKumeVfapCtrEeAY1g/GXFqD\nNaOKyTWIcmP4kQBjhX0d6DHPcNmrPvQGteNjnA0dhkxedKBMQMwX+LQebPn1\nmleb+kVAIKvCqAPyyhMHSHo7bOjDBTPKpbzlKHJjP+CgrknWOBfDF47hurSN\nOrtFGbx6AqHqOVILNSxuGcJ/m08Mj7ZsSZbzUmHGrzYBwRDcyBtYm4Z4UhkV\nv1PqpSKOGPZPe7+X+sOlSWzJiokYz9HekIYlWx2zo5Q767ubht5530P98g/T\n2K1lc1YOcJGWaYBi037DV5izd3TIsUzmkBg59n8Wn1q0w6Jrzrs5aICfT63s\nBKEJOnNbv6tRSvtAFsRZi1i10w/243b2D9bLYiEZn4OYd3Wc8GDhj3C34dmE\nYB8I\r\n=a2l7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgNDzmPuIiUYgvGO1TruKiPwrcQd+6w5nkL3mBtUIhLAiEAglHxNIl84UHFgThyXx9t3hbijSspY7KREBPu7kD/rhw="}]},"_npmUser":{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"},"maintainers":[{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-source-sanity_6.0.4-patched_1605171029991_0.5455088808492357"},"_hasShrinkwrap":false},"6.0.4-patch2":{"name":"@bradleygriffith/gatsby-source-sanity","description":"Gatsby source plugin for building websites using Sanity.io as a backend.","version":"6.0.4-patch2","author":{"name":"Sanity.io","email":"hello@sanity.io"},"contributors":[{"name":"Henrique Doro","email":"opensource@hdoro.dev"}],"engines":{"node":">=8.0.0"},"repository":{"type":"git","url":"git+https://github.com/sanity-io/gatsby-source-sanity.git"},"homepage":"https://github.com/sanity-io/gatsby-source-sanity#readme","license":"MIT","bugs":{"url":"https://github.com/sanity-io/gatsby-source-sanity/issues"},"keywords":["gatsby","gatsby-plugin","gatsby-source-plugin"],"main":"index.js","types":"lib-es5/index.d.ts","scripts":{"test":"jest","build":"tsc && tsc -t ES5 --outDir lib-es5","format":"prettier --write src/**/*.{ts,tsx}","watch":"tsc --watch","prepublishOnly":"npm run build && npm test"},"dependencies":{"@sanity/client":"^2.0.1","@sanity/image-url":"^0.140.19","@sanity/mutator":"^2.0.1","@types/url-parse":"^1.4.3","axios":"^0.21.0","debug":"^4.2.0","fs-extra":"^9.0.1","get-stream":"^5.1.0","lodash":"^4.17.20","oneline":"^1.0.2","pump":"^3.0.0","rxjs":"^6.6.3","split2":"^3.2.2","through2":"^3.0.1","url-parse":"^1.4.4"},"devDependencies":{"@types/debug":"^4.1.5","@types/fs-extra":"^9.0.2","@types/graphql":"^14.5.0","@types/jest":"^26.0.15","@types/lodash":"^4.14.162","@types/node":"^14.14.3","@types/pump":"^1.0.1","@types/react-dom":"^16.9.9","@types/split2":"^2.1.6","@types/through2":"^2.0.36","eslint":"^7.12.0","eslint-config-prettier":"^6.14.0","eslint-config-sanity":"^1.150.8","gatsby":"^2.24.87","jest":"^26.6.1","prettier":"^2.1.2","ts-jest":"^26.4.2","typescript":"^3.9.5"},"peerDependencies":{"gatsby":"^2.2.0"},"directories":{"lib":"lib","test":"test"},"gitHead":"45433c44dd954b0b9b4df5088e2fdd6c935e4c3c","_id":"@bradleygriffith/gatsby-source-sanity@6.0.4-patch2","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-lgHxl/md+4yxAMr0lwHgjjNgTNR85S1A77EXxZojXIN1h7x+CO4e4fWyRB0YwYNVlr2drtHAhS+IQ3ctS3+ocQ==","shasum":"38c68cd2dc7f07151eb47b4fdde1bc4a763cb1ad","tarball":"https://registry.npmjs.org/@bradleygriffith/gatsby-source-sanity/-/gatsby-source-sanity-6.0.4-patch2.tgz","fileCount":185,"unpackedSize":385270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrPiwCRA9TVsSAnZWagAAIY0QAJPwsZ+Zg+k2C/KiqFwV\nhPaOzATleySc06dFxIX8sCDx7LrMzlpr0GS4knw+Wcywhjz8lFAhsWGBJ/54\nqeXe8qVHZbl+0rd4uTzJDd9pGHG0St8UR3vhZoG5BBMgIRJPO/7J/DrtjZGW\n/uj4XF3BB9+pnsGZJdaVPwd8DeXEGZq1Kw/r2qKNCN2ooJh7vlSG9y74lAHo\ntkW6x7mkGaXLsFQ532usRohyfs9YsNOiWJERQRXGJ86QJCBTCNP6Gdfu/5pK\nv04IOxJb8n05SXj1exS1t/dMcv5uwmJrfc8zfgohKHJbrAhQ0yYUg/0v4sNt\nEoobntSK/HEpIP+aIVekyjKx9yrCePYGujVJUwynjutp7JytvITeE3ooNuLt\n38++DE0FvZff5ngD7DUxKSN39IxhGl1IgkuH7LVpgD+SBLaZyADrBu+zzx+5\nZljNpuQAnOq59Ufjwqy1m5PgSgsIDyRBlZnbhRX2OZaGYdI9dmbAVtPKq7os\n/kmEAETr6GuvxdDCm/MQpjmvGsDDAnwPbMoC6ZW7fxV62Q3PuA4rK7wc07nc\nddwAD0dzOdNh1w76W76DeLaMJtrhWSJPLx0xBBo8fxiTeVs8KKuLiRiXzPOL\n/pQR1wCARpMxK3z55xHJ/7pqt83rlZB53x6wMYiYkkCzJttdzo1qkH/YYFlr\nKGlj\r\n=Qw/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFqQmcQz20L8au+QeqkHyzRaFc+BkkQnbOZMym4dTXiAIhAORGOYUia8I3FSP+D7AT8R7JQ32LB2Gc467OeTwNZcak"}]},"_npmUser":{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"},"maintainers":[{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gatsby-source-sanity_6.0.4-patch2_1605171375602_0.33942471268046437"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-12T07:44:01.491Z","6.0.4":"2020-11-12T07:44:01.643Z","modified":"2022-04-04T20:20:08.658Z","6.0.4-patched":"2020-11-12T08:50:30.209Z","6.0.4-patch2":"2020-11-12T08:56:15.745Z"},"maintainers":[{"name":"bradleygriffith","email":"bradley.j.griffith@gmail.com"}],"description":"Gatsby source plugin for building websites using Sanity.io as a backend.","homepage":"https://github.com/sanity-io/gatsby-source-sanity#readme","keywords":["gatsby","gatsby-plugin","gatsby-source-plugin"],"repository":{"type":"git","url":"git+https://github.com/sanity-io/gatsby-source-sanity.git"},"contributors":[{"name":"Henrique Doro","email":"opensource@hdoro.dev"}],"author":{"name":"Sanity.io","email":"hello@sanity.io"},"bugs":{"url":"https://github.com/sanity-io/gatsby-source-sanity/issues"},"license":"MIT","readme":"# gatsby-source-sanity\n\nSource plugin for pulling data from [Sanity.io](https://www.sanity.io/) into [Gatsby](https://www.gatsbyjs.org/) websites. Develop with real-time preview of all content changes. Compatible with `gatsby-image`.\n\nGet up and running in minutes with a fully configured starter project: \n* [Blog with Gatsby](https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog)\n* [Portfolio with Gatsby](https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-portfolio).\n\n[![Watch a video about the company website built with Gatsby using Sanity.io as a headless CMS](https://cdn.sanity.io/images/3do82whm/production/4f652e6d114e7010aa633b81cbcb97c335980fc8-1920x1080.png?w=500)](https://www.youtube.com/watch?v=STtpXBvJmDA)\n\n## Table of contents\n\n- [Install](#install)\n- [Basic usage](#basic-usage)\n- [Options](#options)\n- [Preview of unpublished content](#preview-of-unpublished-content)\n- [Real-time content preview with watch mode](#real-time-content-preview-with-watch-mode)\n- [GraphQL API](#graphql-api)\n- [Using images](#using-images)\n  - [Fluid](#fluid)\n  - [Fixed](#fixed)\n  - [Available fragments](#available-fragments)\n  - [Usage outside of GraphQL](#usage-outside-of-graphql)\n- [Generating pages](#generating-pages)\n- [\"Raw\" fields](#raw-fields)\n- [Portable Text / Block Content](#portable-text--block-content)\n- [Using .env variables](#using-env-variables)\n- [Credits](#credits)\n\n\n[See the getting started video](https://www.youtube.com/watch?v=qU4lFYp3KiQ)\n\n## Install\n\nFrom the command line, use npm (node package manager) to install the plugin:\n\n```console\nnpm install gatsby-source-sanity\n```\n\n\nIn the `gatsby-config.js` file in the Gatsby project's root directory, add the plugin configuration inside of the `plugins` section:\n\n```js\nmodule.exports = {\n  // ...\n  plugins: [\n    {\n      resolve: `gatsby-source-sanity`,\n      options: {\n        projectId: `abc123`,\n        dataset: `blog`,\n        // a token with read permissions is required\n        // if you have a private dataset\n        token: process.env.SANITY_TOKEN,\n\n        // If the Sanity GraphQL API was deployed using `--tag <name>`,\n        // use `graphqlTag` to specify the tag name. Defaults to `default`.\n        graphqlTag: 'default',\n      },\n    },\n  // ...\n],\n  // ...\n}\n```\n\nYou can access `projectId` and `dataset` by executing `sanity debug --secrets` in the Sanity studio folder. Note that the token printed may be used for development, but is tied to your Sanity CLI login session using your personal Sanity account - make sure to keep it secure and not include it in version control! For production, you'll want to make sure you use a read token generate in the Sanity [management interface](https://manage.sanity.io/).\n\n## Basic usage\n\nAt this point you should [set up a GraphQL API](https://www.sanity.io/docs/graphql) for your Sanity dataset, if you have not done so already. This will help the plugin in knowing which types and fields exists, so you can query for them even without them being present in any current documents.\n\n**You should redeploy the GraphQL API everytime you make changes to the schema that you want to use in Gatsby by running ```sanity graphql deploy``` from within your Sanity project directory**\n\nExplore http://localhost:8000/___graphql after running `gatsby develop` to understand the created data and create a new query and checking available collections and fields by typing `CTRL + SPACE`.\n\n## Options\n\n| Options       | Type    | Default   | Description                                                                                                                                                        |\n| ------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| projectId     | string  |           | **[required]** Your Sanity project's ID                                                                                                                            |\n| dataset       | string  |           | **[required]** The dataset to fetch from                                                                                                                           |\n| token         | string  |           | Authentication token for fetching data from private datasets, or when using `overlayDrafts` [Learn more](https://www.sanity.io/docs/http-auth)                     |\n| graphqlTag    | string  | `default` | If the Sanity GraphQL API was deployed using `--tag <name>`, use this to specify the tag name.                                                                     |\n| overlayDrafts | boolean | `false`   | Set to `true` in order for drafts to replace their published version. By default, drafts will be skipped.                                                          |\n| watchMode     | boolean | `false`   | Set to `true` to keep a listener open and update with the latest changes in realtime. If you add a `token` you will get all content updates down to each keypress. |\n\n## Preview of unpublished content\n\nSometimes you might be working on some new content that is not yet published, which you want to make sure looks alright within your Gatsby site. By setting the `overlayDrafts` setting to `true`, the draft versions will as the option says \"overlay\" the regular document. In terms of Gatsby nodes, it will _replace_ the published document with the draft.\n\nKeep in mind that drafts do not have to conform to any validation rules, so your frontend will usually want to double-check all nested properties before attempting to use them.\n\n## Real-time content preview with watch mode\n\nWhile developing, it can often be beneficial to get updates without having to manually restart the build process. By setting `watchMode` to true, this plugin will set up a listener which watches for changes. When it detects a change, the document in question is updated in real-time and will be reflected immediately.\n\nIf you add [a `token` with read rights](https://www.sanity.io/docs/http-auth#robot-tokens) and set `overlayDrafts` to true, each small change to the draft will immediately be applied.\n\n## GraphQL API\n\nBy [deploying a GraphQL API](https://www.sanity.io/docs/graphql) for your dataset, we are able to introspect and figure out which schema types and fields are available and make informed choices based on this information.\n\nPrevious versions did not _require_ this, but often lead to very confusing and unpredictable behavior, which is why we have now made it a requirement.\n\n## Using images\n\nImage fields will have the image URL available under the `field.asset.url` key, but you can also use [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) for a smooth experience. It's a React component that enables responsive images and advanced image loading techniques. It works great with this source plugin, without requiring any additional build steps.\n\nThere are two types of responsive images supported; _fixed_ and _fluid_. To decide between the two, ask yourself: \"do I know the exact size this image will be?\" If yes, you'll want to use _fixed_. If no and its width and/or height need to vary depending on the size of the screen, then you'll want to use _fluid_.\n\n### Fluid\n\n```js\nimport React from 'react'\nimport Img from 'gatsby-image'\n\nconst Person = ({data}) => (\n  <article>\n    <h2>{data.sanityPerson.name}</h2>\n    <Img fluid={data.sanityPerson.profileImage.asset.fluid} />\n  </article>\n)\n\nexport default Person\n\nexport const query = graphql`\n  query PersonQuery {\n    sanityPerson {\n      name\n      profileImage {\n        asset {\n          fluid(maxWidth: 700) {\n            ...GatsbySanityImageFluid\n          }\n        }\n      }\n    }\n  }\n`\n```\n\n### Fixed\n\n```js\nimport React from 'react'\nimport Img from 'gatsby-image'\n\nconst Person = ({data}) => (\n  <article>\n    <h2>{data.sanityPerson.name}</h2>\n    <Img fixed={data.sanityPerson.profileImage.asset.fixed} />\n  </article>\n)\n\nexport default Person\n\nexport const query = graphql`\n  query PersonQuery {\n    sanityPerson {\n      name\n      profileImage {\n        asset {\n          fixed(width: 400) {\n            ...GatsbySanityImageFixed\n          }\n        }\n      }\n    }\n  }\n`\n```\n\n### Available fragments\n\nThese are the fragments available on image assets, which allows easy lookup of the fields required by gatsby-image in various modes:\n\n- `GatsbySanityImageFixed`\n- `GatsbySanityImageFixed_noBase64`\n- `GatsbySanityImageFluid`\n- `GatsbySanityImageFluid_noBase64`\n\n### Usage outside of GraphQL\n\nIf you are using the raw fields, or simply have an image asset ID you would like to use gatsby-image for, you can import and call the utility functions `getFluidGatsbyImage` and `getFixedGatsbyImage`:\n\n```js\nimport Img from 'gatsby-image'\nimport {getFluidGatsbyImage, getFixedGatsbyImage} from 'gatsby-source-sanity'\n\nconst sanityConfig = {projectId: 'abc123', dataset: 'blog'}\nconst imageAssetId = 'image-488e172a7283400a57e57ffa5762ac3bd837b2ee-4240x2832-jpg'\n\nconst fluidProps = getFluidGatsbyImage(imageAssetId, {maxWidth: 1024}, sanityConfig)\n\n<Img fluid={fluidProps} />\n```\n\n## Generating pages\n\nSanity does not have any concept of a \"page\", since it's built to be totally agnostic to how you want to present your content and in which medium, but since you're using Gatsby, you'll probably want some pages!\n\nAs with any Gatsby site, you'll want to create a `gatsby-node.js` in the root of your Gatsby site repository (if it doesn't already exist), and declare a `createPages` function. Within it, you'll use GraphQL to query for the data you need to build the pages.\n\nFor instance, if you have a `project` document type in Sanity that you want to generate pages for, you could do something along the lines of this:\n\n```js\nexports.createPages = async ({graphql, actions}) => {\n  const {createPage} = actions\n\n  const result = await graphql(`\n    {\n      allSanityProject(filter: {slug: {current: {ne: null}}}) {\n        edges {\n          node {\n            title\n            description\n            tags\n            launchDate(format: \"DD.MM.YYYY\")\n            slug {\n              current\n            }\n            image {\n              asset {\n                url\n              }\n            }\n          }\n        }\n      }\n    }\n  `)\n\n  if (result.errors) {\n    throw result.errors\n  }\n\n  const projects = result.data.allSanityProject.edges || []\n  projects.forEach((edge, index) => {\n    const path = `/project/${edge.node.slug.current}`\n\n    createPage({\n      path,\n      component: require.resolve('./src/templates/project.js'),\n      context: {slug: edge.node.slug.current},\n    })\n  })\n}\n```\n\nThe above query will fetch all projects that have a `slug.current` field set, and generate pages for them, available as `/project/<project-slug>`. It will use the template defined in `src/templates/project.js` as the basis for these pages.\n\nMost [Gatsby starters](https://www.gatsbyjs.org/starters/?v=2) have some example of building pages, which you should be able to modify to your needs.\n\nRemember to use the GraphiQL interface to help write the queries you need - it's usually running at http://localhost:8000/___graphql while running `gatsby develop`.\n\n## \"Raw\" fields\n\nArrays and object types at the root of documents will get an additional \"raw JSON\" representation in a field called `_raw<FieldName>`. For instance, a field named `body` will be mapped to `_rawBody`. It's important to note that this is only done for top-level nodes (documents).\n\nQuite often, you'll want to replace reference fields (eg `_ref: '<documentId>'`), with the actual document that is referenced. This is done automatically for regular fields, but within raw fields, you have to explicitly enable this behavior, by using the field-level `resolveReferences` argument:\n\n```graphql\n{\n  allSanityProject {\n    edges {\n      node {\n        _rawTasks(resolveReferences: {maxDepth: 5})\n      }\n    }\n  }\n}\n```\n\n## Portable Text / Block Content\n\nRich text in Sanity is usually represented as [Portable Text](https://www.portabletext.org/) (previously known as \"Block Content\").\n\nThese data structures can be deep and a chore to query (specifying all the possible fields). As [noted above](#raw-fields), there is a \"raw\" alternative available for these fields which is usually what you'll want to use.\n\nYou can install [block-content-to-react](https://www.npmjs.com/package/@sanity/block-content-to-react) from npm and use it in your Gatsby project to serialize Portable Text. It lets you use your own React components to override defaults and render custom content types. [Learn more about Portable Text in our documentation](https://www.sanity.io/docs/content-studio/what-you-need-to-know-about-block-text).\n\n## Using .env variables\n\nIf you don't want to attach your Sanity project's ID to the repo, you can easily store it in .env files by doing the following:\n\n```js\n// In your .env file\nSANITY_PROJECT_ID = abc123\nSANITY_DATASET = production\nSANITY_TOKEN = my-super-secret-token\n\n// In your gatsby-config.js file\nrequire('dotenv').config({\n  path: `.env.${process.env.NODE_ENV}`\n})\n\nmodule.exports = {\n  // ...\n  plugins: [\n    {\n      resolve: 'gatsby-source-sanity',\n      options: {\n        projectId: process.env.SANITY_PROJECT_ID,\n        dataset: process.env.SANITY_DATASET,\n        token: process.env.SANITY_TOKEN\n        // ...\n      }\n    }\n  ]\n  // ...\n}\n```\n\nThis example is based off [Gatsby Docs' implementation](https://www.gatsbyjs.org/docs/environment-variables/).\n\n## Credits\n\nHuge thanks to [Henrique Doro](https://github.com/hdoro) for doing the initial implementation of this plugin, and for donating it to the Sanity team. Mad props!\n\nBig thanks to the good people backing Gatsby for bringing such a joy to our developer days!\n","readmeFilename":"README.md"}