{"id":13750650,"url":"https://github.com/datocms/gatsby-source-datocms","last_synced_at":"2025-05-15T14:08:13.830Z","repository":{"id":37444959,"uuid":"112746384","full_name":"datocms/gatsby-source-datocms","owner":"datocms","description":"Official GatsbyJS source plugin to pull content from DatoCMS","archived":false,"fork":false,"pushed_at":"2025-02-06T08:11:47.000Z","size":2242,"stargazers_count":140,"open_issues_count":9,"forks_count":50,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-07T21:49:27.200Z","etag":null,"topics":["datocms","gatsby","gatsbyjs","integration"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/datocms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2017-12-01T14:02:58.000Z","updated_at":"2025-02-06T08:11:51.000Z","dependencies_parsed_at":"2023-12-20T20:35:06.277Z","dependency_job_id":"868a5e16-4437-4fe6-8fb2-8207c400f29b","html_url":"https://github.com/datocms/gatsby-source-datocms","commit_stats":{"total_commits":470,"total_committers":36,"mean_commits":"13.055555555555555","dds":"0.48085106382978726","last_synced_commit":"2e9def6448b1d62a7e698ec0a6fe98fbdabdd529"},"previous_names":[],"tags_count":124,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fgatsby-source-datocms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fgatsby-source-datocms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fgatsby-source-datocms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datocms%2Fgatsby-source-datocms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datocms","download_url":"https://codeload.github.com/datocms/gatsby-source-datocms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"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":["datocms","gatsby","gatsbyjs","integration"],"created_at":"2024-08-03T08:00:43.543Z","updated_at":"2025-05-15T14:08:08.808Z","avatar_url":"https://github.com/datocms.png","language":"JavaScript","funding_links":[],"categories":["About"],"sub_categories":[],"readme":"\u003c!--datocms-autoinclude-header start--\u003e\n\n\u003ca href=\"https://www.datocms.com/\"\u003e\u003cimg src=\"https://www.datocms.com/images/full_logo.svg\" height=\"60\"\u003e\u003c/a\u003e\n\n👉 [Visit the DatoCMS homepage](https://www.datocms.com) or see [What is DatoCMS?](#what-is-datocms)\n\n---\n\n\u003c!--datocms-autoinclude-header end--\u003e\n\n[![Node.js CI](https://github.com/datocms/gatsby-source-datocms/actions/workflows/main.yml/badge.svg)](https://github.com/datocms/gatsby-source-datocms/actions/workflows/main.yml)\n\n# WARNING: MAINTENANCE MODE. NOT RECOMMENDED FOR NEW PROJECTS #\n\n**As of June 2024, due to upstream changes at Gatsby and Netlify, this plugin is now in maintenance mode and no new features will be added. We will still accept critical bug reports and fixes, but will not further develop or support this plugin otherwise. We recommend that new DatoCMS projects use the [Gatsby GraphQL source plugin](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql) instead of this one.**\n\n# ~~gatsby-source-datocms~~\n\n~~Source plugin for pulling models and records into Gatsby from DatoCMS administrative areas. It creates links between records so they can be queried in Gatsby using GraphQL.~~\n\n~~**IMPORTANT**: If you use this plugin, you will not be able to write queries as described in the [DatoCMS Content Delivery API documentation](https://www.datocms.com/docs/content-delivery-api/). Content will be exposed using [Gatsby's schema-generation](https://www.gatsbyjs.org/docs/schema-generation/). If you want to directly use our GraphQL API in Gatsby, consider using the [gatsby-source-graphql](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql) plugin instead.~~\n\nJune 2024 Update: Please read above warning. We suggest using the [Gatsby GraphQL source plugin](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql) instead. This plugin is now on minimal life support.\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Install](#install)\n- [Sample projects](#sample-projects)\n- [How to use](#how-to-use)\n- [How to query](#how-to-query)\n  - [Accessing records](#accessing-records)\n  - [Multiple-paragraph text fields](#multiple-paragraph-text-fields)\n  - [Modular content fields](#modular-content-fields)\n  - [Structured text fields](#structured-text-fields)\n  - [SEO meta tags](#seo-meta-tags)\n  - [Favicon meta tags](#favicon-meta-tags)\n  - [Tree-like collections](#tree-like-collections)\n  - [Single instance models](#single-instance-models)\n  - [Localized fields](#localized-fields)\n    - [Locale fallbacks](#locale-fallbacks)\n- [Integration with Gatsby Image](#integration-with-gatsby-image)\n  - [For Gatsby v3+ (currently in beta)](#for-gatsby-v3-currently-in-beta)\n  - [Compatibility with the deprecated `gatsby-image` component](#compatibility-with-the-deprecated-gatsby-image-component)\n    - [Responsive fluid](#responsive-fluid)\n    - [Responsive fixed](#responsive-fixed)\n- [Field customisations](#field-customisations)\n- [Connecting to multiple DatoCMS projects](#connecting-to-multiple-datocms-projects)\n- [Configuring Content Previews](#configuring-content-previews)\n\n## Install\n\n```bash\nnpm install --save gatsby-source-datocms gatsby-plugin-image\n```\n\nPS. If you're on a Gatsby 2 project, please use version \"^2.6.17\" of this package.\nPS. If you're on a Gatsby 3 project, or Gatsby 4 lower than 4.24.0, please use version \"^4.0.4\" of this package.\n\n## Sample projects\n\nWe've prepared several projects for you: [portfolio](https://github.com/datocms/gatsby-portfolio), [blog](https://github.com/datocms/gatsby-blog-demo), [snipcart](https://github.com/datocms/snipcart-gatsby-demo)\n\n## How to use\n\n```javascript\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: `gatsby-source-datocms`,\n    options: {\n      // You can find your read-only API token under the Settings \u003e API tokens\n      // section of your administrative area. Make sure to grant both CDA and CMA permissions.\n      apiToken: `YOUR_READONLY_API_TOKEN`,\n\n      // The project environment to read from. Defaults to the primary environment:\n      environment: `main`,\n\n      // If you are working on development/staging environment, you might want to\n      // preview the latest version of records instead of the published one:\n      previewMode: false,\n\n      // Disable automatic reloading of content when some change occurs on DatoCMS:\n      disableLiveReload: false,\n\n      // Custom API base URL (you probably don't need this!)\n      // apiUrl: 'https://site-api.datocms.com',\n\n      // Limits page size and can be used to avoid build timeouts.\n      // Default is 500 (also the maximum)\n      pageSize: 500,\n    },\n  },\n];\n```\n\n## How to query\n\nTwo standard data types will be available from DatoCMS: `DatoCmsModel` and `DatoCmsSite`. You can query model nodes created from DatoCMS like the following:\n\n```graphql\n{\n  allDatoCmsModel {\n    edges {\n      node {\n        apiKey\n        name\n        fields {\n          apiKey\n          fieldType\n        }\n      }\n    }\n  }\n}\n```\n\nYour site global settings can be queried like this:\n\n```graphql\n{\n  datoCmsSite {\n    name\n    internalDomain\n    locales\n  }\n}\n```\n\n### Accessing records\n\nNon-standard data types, i.e. models you define in DatoCMS, will also be\navailable in Gatsby. They'll be created in your site's GraphQL schema under\n`datoCms{modelApiKey}` and `allDatoCms{modelApiKey}`. For example,\nif you have a `blog_post` model, you will be able to query it like the following:\n\n```graphql\n{\n  allDatoCmsBlogPost(\n    sort: { fields: [publicationDate], order: DESC }\n    limit: 5\n  ) {\n    edges {\n      node {\n        title\n        excerpt\n        publicationDate(formatString: \"MM-DD-YYYY\")\n        author {\n          name\n          avatar {\n            url\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Multiple-paragraph text fields\n\nFields of type _Multiple-paragraph text_ will be available both as simple\nstrings (ie. `excerpt`) and nodes (ie. `excerptNode`). You can use the latter\nif you want to apply further transformations, like converting markdown with [`gatsby-transformer-remark`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark) (converting markdown only works with `Markdown editor` as name suggests):\n\n```graphql\n{\n  allDatoCmsBlogPost {\n    edges {\n      node {\n        excerptNode {\n          childMarkdownRemark {\n            html\n            timeToRead\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nIf these fields are localized, you can leverage localization arguments to access the field in different languages like explained [here](#localized-fields).\n\n### Modular content fields\n\n[Modular-content fields](https://www.datocms.com/docs/content-modelling/modular-content) can be queried this way:\n\n```graphql\n{\n  datoCmsBlogPost {\n    title\n    content {\n      ... on DatoCmsText {\n        model {\n          apiKey\n        }\n        text\n      }\n      ... on DatoCmsImage {\n        model {\n          apiKey\n        }\n        image {\n          url\n        }\n      }\n    }\n  }\n}\n```\n\nYou can then present your blocks in a similar manner:\n\n```jsx\n\u003cdiv\u003e\n  {data.datoCmsBlogPost.content.map(block =\u003e (\n    \u003cdiv key={block.id}\u003e\n      {block.model.apiKey === 'text' \u0026\u0026 \u003cdiv\u003e{block.text}\u003c/div\u003e}\n      {block.model.apiKey === 'image' \u0026\u0026 \u003cimg src={block.image.url} /\u003e}\n    \u003c/div\u003e\n  ))}\n\u003c/div\u003e\n```\n\n### Structured text fields\n\n[Structured Text fields](https://www.datocms.com/docs/content-modelling/structured-text) can be queried this way:\n\n**⚠️ IMPORTANT**: make sure you add the `id: originalId` part in both the `blocks` and `links` sub-queries, or the `\u003cStructuredText\u003e` component won't work!\n\n```graphql\n{\n  datoCmsBlogPost {\n    content {\n      value\n      links {\n        __typename\n        ... on DatoCmsArticle {\n          id: originalId\n          title\n          slug\n        }\n      }\n      blocks {\n        ... on DatoCmsImage {\n          id: originalId\n          image {\n            url\n            alt\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nYou can then present your blocks using the [`\u003cStructuredText\u003e`](https://github.com/datocms/react-datocms/tree/structured-text#structured-text) component.\n\n```jsx\nimport { StructuredText } from 'react-datocms';\n\n\u003cdiv\u003e\n  {\n    \u003cStructuredText\n      data={data.blogPost.content}\n      renderInlineRecord={({ record }) =\u003e {\n        switch (record.__typename) {\n          case 'DatoCmsArticle':\n            return \u003ca href={`/articles/${record.slug}`}\u003e{record.title}\u003c/a\u003e;\n          default:\n            return null;\n        }\n      }}\n      renderLinkToRecord={({ record, children }) =\u003e {\n        switch (record.__typename) {\n          case 'DatoCmsArticle':\n            return \u003ca href={`/articles/${record.slug}`}\u003e{children}\u003c/a\u003e;\n          default:\n            return null;\n        }\n      }}\n      renderBlock={({ record }) =\u003e {\n        switch (record.__typename) {\n          case 'DatoCmsImage':\n            return \u003cimg src={record.image.url} alt={record.image.alt} /\u003e;\n          default:\n            return null;\n        }\n      }}\n    /\u003e\n  }\n\u003c/div\u003e;\n```\n\nIf you need to generate an excerpt you can use the [`datocms-structured-text-to-plain-text`](https://github.com/stefanoverna/structured-text/blob/main/packages/to-plain-text/README.md) package to convert the document into plain text:\n\n```js\nimport { render as toPlainText } from 'datocms-structured-text-to-plain-text';\nimport ellipsize from 'ellipsize';\n\nellipsize(toPlainText(data.blogPost.content), 100);\n```\n\n### SEO meta tags\n\nAll records have a `seoMetaTags` field that you can use to build SEO meta tags\nfor your record's pages:\n\n```graphql\n{\n  allDatoCmsBlogPost {\n    edges {\n      node {\n        title\n        seoMetaTags {\n          tags {\n            tagName\n            content\n            attributes {\n              property\n              content\n              name\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nThis package exposes a `HelmetDatoCms` component and a `GatsbyDatoCmsSeoMetaTags`\nGraphQL fragment to make it easier use these information in your website:\n\nPS. [Due to a limitation of GraphiQL](https://github.com/graphql/graphiql/issues/612),\nyou can not currently use the `GatsbyDatoCmsSeoMetaTags` fragment in the GraphiQL IDE.\n\n```js\nimport React from 'react'\nimport Link from 'gatsby-link'\nimport { HelmetDatoCms } from 'gatsby-source-datocms'\n\nconst About = ({ data }) =\u003e (\n  \u003carticle className=\"sheet\"\u003e\n    \u003cHelmetDatoCms seo={data.datoCmsAboutPage.seoMetaTags} /\u003e\n    \u003ch1\u003e{data.datoCmsAboutPage.title}\u003c/h1\u003e\n    \u003cp\u003e{data.datoCmsAboutPage.subtitle}\u003c/p\u003e\n  \u003c/article\u003e\n)\n\nexport default About;\n\nexport const query = graphql`\n  query AboutQuery {\n    datoCmsAboutPage {\n      title\n      subtitle\n      seoMetaTags {\n        ...GatsbyDatoCmsSeoMetaTags\n      }\n    }\n  }\n```\n\nIf you need to pass additional meta tags to the underlying `Helmet` component, you can add them as children and props to `HelmetDatoCms`:\n\n```js\n\u003cHelmetDatoCms seo={data.datoCmsAboutPage.seoMetaTags}\u003e\n  \u003clink rel=\"alternate\" href=\"http://www.mysite.com/it/\" hreflang=\"it\" /\u003e\n  \u003clink rel=\"alternate\" href=\"http://www.mysite.com/fr/\" hreflang=\"fr\" /\u003e\n\u003c/HelmetDatoCms\u003e\n```\n\nThe `datoCmsSite` global settings has also the `globalSeo` field that contains the fallback fields:\n\n```graphql\n{\n  datoCmsSite {\n    globalSeo {\n      siteName\n      titleSuffix\n      twitterAccount\n      facebookPageUrl\n      fallbackSeo {\n        title\n        description\n        image {\n          url\n        }\n        twitterCard\n      }\n    }\n  }\n}\n```\n\n### Favicon meta tags\n\nYou can get the complete set of meta tags related to your site favicon this way:\n\n```graphql\n{\n  datoCmsSite {\n    faviconMetaTags {\n      tagName\n      attributes {\n        rel\n        sizes\n        href\n        name\n        content\n        type\n      }\n    }\n  }\n}\n```\n\nSimilarly to what happens with SEO meta tags, you can use the `HelmetDatoCms` component with the `GatsbyDatoCmsFaviconMetaTags` fragment to make it easier use these information in your website:\n\n```js\nimport React from 'react'\nimport Link from 'gatsby-link'\nimport { HelmetDatoCms } from 'gatsby-source-datocms'\n\nconst TemplateWrapper = ({ data }) =\u003e (\n  \u003carticle className=\"sheet\"\u003e\n    \u003cHelmetDatoCms favicon={data.datoCmsSite.faviconMetaTags} /\u003e\n    \u003ch1\u003e{data.datoCmsAboutPage.title}\u003c/h1\u003e\n    \u003cp\u003e{data.datoCmsAboutPage.subtitle}\u003c/p\u003e\n  \u003c/article\u003e\n)\n\nexport default TemplateWrapper\n\nexport const query = graphql`\n  query LayoutQuery {\n    datoCmsSite {\n      faviconMetaTags {\n        ...GatsbyDatoCmsFaviconMetaTags\n      }\n    }\n  }\n```\n\n### Tree-like collections\n\nIf you have a model configured as a tree, you can navigate the hierarchy with\n`treeChildren` and `treeParent` this way:\n\n```graphql\n{\n  allDatoCmsCategory(filter: { root: { eq: true } }) {\n    edges {\n      node {\n        title\n        treeChildren {\n          title\n          treeChildren {\n            title\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n### Single instance models\n\nYou can access to single instance models like this:\n\n```graphql\n{\n  datoCmsHomepage {\n    title\n    content\n  }\n}\n```\n\n### Localized fields\n\nWhen you're fetching the value of a localized field, by default it will be returned to the project default locale — that is, the first locale in your project settings:\n\n```graphql\nquery {\n  datoCmsSite {\n    locales # -\u003e [\"en\", \"it\"]\n  }\n  allDatoCmsBlogPost {\n    title # -\u003e will return the title value in \"en\" locale\n  }\n}\n```\n\nTo change that, you can add a locale argument to queries to specify another locale:\n\n```graphql\nquery {\n  allDatoCmsBlogPost(locale: \"it\") {\n    title # -\u003e will return the title value in \"it\" locale\n  }\n}\n```\n\nYou can also specify a different locale on a per-field basis:\n\n```graphql\nquery {\n  allDatoCmsBlogPost(locale: \"it\") {\n    title # -\u003e will return the title value in \"it\" locale\n    enTitle: title(locale: \"en\") # -\u003e will return the title value in \"en\" locale\n  }\n}\n```\n\n#### Locale fallbacks\n\nYou can also specify a list of fallback locales together with the locale argument:\n\n```graphql\nquery {\n  allDatoCmsBlogPost(locale: \"it\", fallbackLocales: [\"en\"]) {\n    title\n  }\n}\n```\n\nIf the field value for the specified locale is null-ish (null, empty string or empty array), the system will try to find a non null-ish value in each of the localizations specified in the fallbackLocales argument. The order of the elements in the fallbackLocales argument is important, as the system will start from the first element in the array, and go on from there.\n\nJust like the locale argument, you can specify different fallback locales on a per-field basis:\n\n```graphql\nquery {\n  allDatoCmsBlogPost {\n    title(locale: \"it\", fallbackLocales: [\"en\"])\n  }\n}\n```\n\n## Integration with Gatsby Image\n\n### For Gatsby v3+ (currently in beta)\n\nThis plugin is compatible with the new [gatsby-plugin-image](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/) and the `\u003cGatsbyImage /\u003e` component released with Gatsby v3:\n\n```jsx\nimport React from 'react';\nimport { GatsbyImage } from 'gatsby-plugin-image';\n\nconst About = ({ data }) =\u003e (\n  \u003carticle\u003e\n    \u003cGatsbyImage image={data.datoCmsAboutPage.photo.gatsbyImageData} /\u003e\n  \u003c/article\u003e\n);\n\nexport default About;\n\nexport const query = graphql`\n  query AboutQuery {\n    datoCmsAboutPage {\n      photo {\n        gatsbyImageData(\n          width: 600\n          placeholder: BLURRED\n          forceBlurhash: false\n          imgixParams: { invert: true }\n        )\n      }\n    }\n  }\n`;\n```\n\nWhen `placeholder` is set to `BLURRED`, the normal behaviour is to use DatoCMS blurhash placeholders, except for PNG files, which might require transparency. If you want to force blurhash placeholders also for PNGs, pass the option `forceBlurhash: true`.\n\n**NOTE:** [gatsby-plugin-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp) needs to be listed as a dependency if you plan to use `placeholder: TRACED_SVG`.\n\n### Compatibility with the deprecated `gatsby-image` component\n\n\u003cdetails\u003e\u003csummary\u003eIf you're using the old `gatsby-image` package, read here!\u003c/summary\u003e\n\nImages coming from DatoCMS can be queried so that they can be used with [gatsby-image](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image), a React component specially designed to work seamlessly with Gatsby's GraphQL queries that implements advanced image loading techniques to easily and completely optimize image loading for your sites.\n\n**NOTE:** [gatsby-plugin-sharp](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp) needs to be listed as a dependancy for the `_tracedSVG` fragments to function.\n\n#### Responsive fluid\n\nThis GraphQL option allows you to generate responsive images that automatically respond to different device screen resolution and widths. E.g. a smartphone browser will download a much smaller image than a desktop device.\n\nInstead of specifying a width and height, with `fluid` you specify a `maxWidth`, the max width the container of the images reaches.\n\n```jsx\nimport React from 'react';\nimport Img from 'gatsby-image';\n\nconst About = ({ data }) =\u003e (\n  \u003carticle\u003e\n    \u003cImg fluid={data.datoCmsAboutPage.photo.fluid} /\u003e\n  \u003c/article\u003e\n);\n\nexport default About;\n\nexport const query = graphql`\n  query AboutQuery {\n    datoCmsAboutPage {\n      photo {\n        fluid(\n          maxWidth: 600\n          forceBlurhash: false\n          imgixParams: { fm: \"jpg\", auto: \"compress\" }\n        ) {\n          ...GatsbyDatoCmsFluid\n        }\n      }\n    }\n  }\n`;\n```\n\nThe normal behaviour is to use DatoCMS blurhash placeholders, except for PNG files, which might require transparency. If you want to force blurhash placeholders also for PNGs, pass the option `forceBlurhash: true`.\n\nThe fragments you can use are:\n\n- `GatsbyDatoCmsFluid`: \"blur-up\" technique to show a preview of the image while it loads;\n- `GatsbyDatoCmsFluid_tracedSVG`: \"traced placeholder\" SVG technique to show a preview of the image while it loads;\n- `GatsbyDatoCmsFluid_noBase64`: no preview effects.\n\n`gatsby-image` will automatically use WebP images when the browser supports the file format. If the browser doesn’t support WebP, `gatsby-image` will fall back to the default image format.\n\n#### Responsive fixed\n\nIf you make queries with resolutions then Gatsby automatically generates images with 1x, 1.5x, 2x, and 3x versions so your images look great on whatever screen resolution of device they're on. If you're on a retina class screen, notice how much sharper these images are.\n\n```jsx\nimport React from 'react';\nimport Img from 'gatsby-image';\n\nconst About = ({ data }) =\u003e (\n  \u003carticle\u003e\n    \u003cImg fixed={data.datoCmsAboutPage.photo.fixed} /\u003e\n  \u003c/article\u003e\n);\n\nexport default About;\n\nexport const query = graphql`\n  query AboutQuery {\n    datoCmsAboutPage {\n      photo {\n        fixed(\n          width: 200\n          forceBlurhash: false\n          imgixParams: { fm: \"jpg\", auto: \"compress\" }\n        ) {\n          ...GatsbyDatoCmsFixed\n        }\n      }\n    }\n  }\n`;\n```\n\nThe normal behaviour is to use DatoCMS blurhash placeholders, except for PNG files, which might require transparency. If you want to force blurhash placeholders also for PNGs, pass the option `forceBlurhash: true`.\n\nThe fragments you can use are:\n\n- `GatsbyDatoCmsFixed`: \"blur-up\" technique to show a preview of the image while it loads;\n- `GatsbyDatoCmsFixed_tracedSVG`: \"traced placeholder\" SVG technique to show a preview of the image while it loads;\n- `GatsbyDatoCmsFixed_noBase64`: no preview effects.\n\n`gatsby-image` will automatically use WebP images when the browser supports the file format. If the browser doesn’t support WebP, `gatsby-image` will fall back to the default image format.\n\n\u003c/details\u003e\n\n## Field customisations\n\nIf you need to customize the GraphQL response that you get from DatoCMS (e.g augmenting models, manipulating fields), you should include your logic in the `createResolvers` API.\n\nRead more about how to customise the GraphQL schema in the [Gatsby documentation](https://www.gatsbyjs.org/docs/schema-customization/#extending-third-party-types)\n\n## Connecting to multiple DatoCMS projects\n\nIf you need to connect your website to multiple DatoCMS projects, use the `instancePrefix` option:\n\n```javascript\n// In your gatsby-config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-source-datocms`,\n      options: {\n        apiToken: 'XXX',\n        instancePrefix: 'FirstProject',\n      },\n    },\n    {\n      resolve: `gatsby-source-datocms`,\n      options: {\n        apiToken: 'YYY',\n        instancePrefix: 'SecondProject',\n      },\n    },\n  ],\n};\n```\n\nThis will allow you to perform all the queries with a specific token and distinguish between the results:\n\n```graphql\n{\n  datoCmsFirstProjectSite {\n    name\n    internalDomain\n    locales\n  }\n\n  datoCmsSecondProjectSite {\n    name\n    internalDomain\n    locales\n  }\n\n  allDatoCmsFirstProjectBlogPost {\n    nodes {\n      title\n      excerpt\n    }\n  }\n\n  allDatoCmsSecondProjectBlogPost {\n    nodes {\n      title\n      cover {\n        url\n      }\n    }\n  }\n}\n```\n\n## Configuring Content Previews\n\nConfiguration will be handled for you when using DatoCMS Quick Connect on Gatsby Cloud. However, if you'd prefer not to use Quick Connect and manually setup the integration, instructions can be found [here](https://support.gatsbyjs.com/hc/en-us/articles/360052324454-Connecting-to-DatoCMS).\n\n\u003c!--datocms-autoinclude-footer start--\u003e\n\n---\n\n# What is DatoCMS?\n\n\u003ca href=\"https://www.datocms.com/\"\u003e\u003cimg src=\"https://www.datocms.com/images/full_logo.svg\" height=\"60\" alt=\"DatoCMS - The Headless CMS for the Modern Web\"\u003e\u003c/a\u003e\n\n[DatoCMS](https://www.datocms.com/) is the REST \u0026 GraphQL Headless CMS for the modern web.\n\nTrusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our [developers](https://www.datocms.com/team/best-cms-for-developers), [content editors](https://www.datocms.com/team/content-creators) and [marketers](https://www.datocms.com/team/cms-digital-marketing)!\n\n**Why DatoCMS?**\n\n- **API-First Architecture**: Built for both REST and GraphQL, enabling flexible content delivery\n- **Just Enough Features**: We believe in keeping things simple, and giving you [the right feature-set tools](https://www.datocms.com/features) to get the job done\n- **Developer Experience**: First-class TypeScript support with powerful developer tools\n\n**Getting Started:**\n\n- ⚡️ [Create Free Account](https://dashboard.datocms.com/signup) - Get started with DatoCMS in minutes\n- 🔖 [Documentation](https://www.datocms.com/docs) - Comprehensive guides and API references\n- ⚙️ [Community Support](https://community.datocms.com/) - Get help from our team and community\n- 🆕 [Changelog](https://www.datocms.com/product-updates) - Latest features and improvements\n\n**Official Libraries:**\n\n- [**Content Delivery Client**](https://github.com/datocms/cda-client) - TypeScript GraphQL client for content fetching\n- [**REST API Clients**](https://github.com/datocms/js-rest-api-clients) - Node.js/Browser clients for content management\n- [**CLI Tools**](https://github.com/datocms/cli) - Command-line utilities for schema migrations (includes [Contentful](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [WordPress](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress) importers)\n\n**Official Framework Integrations**\n\nHelpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:\n\n- [**React Components**](https://github.com/datocms/react-datocms)\n- [**Vue Components**](https://github.com/datocms/vue-datocms)\n- [**Svelte Components**](https://github.com/datocms/datocms-svelte)\n- [**Astro Components**](https://github.com/datocms/astro-datocms)\n\n**Additional Resources:**\n\n- [**Plugin Examples**](https://github.com/datocms/plugins) - Example plugins we've made that extend the editor/admin dashboard\n- [**Starter Projects**](https://www.datocms.com/marketplace/starters) - Example website implementations for popular frameworks\n- [**All Public Repositories**](https://github.com/orgs/datocms/repositories?q=\u0026type=public\u0026language=\u0026sort=stargazers)\n\n\u003c!--datocms-autoinclude-footer end--\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatocms%2Fgatsby-source-datocms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatocms%2Fgatsby-source-datocms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatocms%2Fgatsby-source-datocms/lists"}