{"id":22004549,"url":"https://github.com/slicknode/gatsby-source-slicknode","last_synced_at":"2026-04-16T14:31:52.000Z","repository":{"id":57245017,"uuid":"312704510","full_name":"slicknode/gatsby-source-slicknode","owner":"slicknode","description":"Gatsby source plugin for Slicknode Headless GraphQL CMS","archived":false,"fork":false,"pushed_at":"2021-04-13T22:33:06.000Z","size":663,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-03T08:03:09.973Z","etag":null,"topics":["cms","gatsby","gatsby-plugin","graphql","image-processing","slicknode"],"latest_commit_sha":null,"homepage":"https://slicknode.com","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/slicknode.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}},"created_at":"2020-11-13T23:16:19.000Z","updated_at":"2021-04-13T22:33:08.000Z","dependencies_parsed_at":"2022-09-01T06:12:02.963Z","dependency_job_id":null,"html_url":"https://github.com/slicknode/gatsby-source-slicknode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slicknode%2Fgatsby-source-slicknode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slicknode%2Fgatsby-source-slicknode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slicknode%2Fgatsby-source-slicknode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slicknode%2Fgatsby-source-slicknode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slicknode","download_url":"https://codeload.github.com/slicknode/gatsby-source-slicknode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245062901,"owners_count":20554815,"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":["cms","gatsby","gatsby-plugin","graphql","image-processing","slicknode"],"created_at":"2024-11-30T00:16:28.494Z","updated_at":"2026-04-16T14:31:46.981Z","avatar_url":"https://github.com/slicknode.png","language":"TypeScript","readme":"# GatsbyJS Slicknode Source Plugin\n\nSource plugin for loading content from [Slicknode Headless GraphQL CMS](https://slicknode.com) into Gatsby.\n\nThis source plugin downloads all content nodes from the CMS and adds the content as Gatsby nodes\nto the Gatsby GraphQL API. The content can then be transformed, extended etc. with all the\nother Gatsby plugins. \n\n**Features:**\n\n-   Adding sources\n-   Custom fragments\n-   Image download (optional) to work seamlessly with [gatsby-image](https://www.gatsbyjs.com/plugins/gatsby-image/?=), [gatsby-plugin-sharp](https://www.gatsbyjs.com/plugins/gatsby-plugin-sharp/?=), etc.\n-   Preview mode\n\n**Links:**\n\n-   [Website](https://slicknode.com/)\n-   [Docs](https://slicknode.com/docs/)\n-   [Slack Channel](https://slicknode.com/slack/)\n-   [Getting started with Slicknode](https://slicknode.com/docs/quickstart/)\n-   [Why Slicknode?](https://slicknode.com/product/developers/)\n\n\n## Installation\n\nInstall the source plugin via npm:\n\n    npm install gatsby-source-slicknode\n\n\n## Configuration\n\nAdd the source plugin to the `gatsby-config.js` file of your project and customize the configuration:\n\n\n```javascript\n// In your gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-source-slicknode',\n      options: {\n        // Endpoint to your Slicknode GraphQL API (Required)\n        endpoint: 'https://\u003cyour-slicknode-project-endpoint\u003e',\n  \n        // Download all images and add a localFile field to the slicknode `Image` types.\n        // The file can then be used in combination with gatsby-transformer-sharp and gatsby-image\n        // Default: true\n        downloadImages: true,\n\n        // If true, loads the content in preview mode.\n        // default: false\n        preview: false,\n\n        // Path to the directory where the Slicknode stores fragments of the individual types\n        // Those can then be customized to add or exclude specific fields from the nodes that are \n        // added to the gatsby store, add filtered connections etc.\n        // If you are using multiple Slicknode APIs in the same projects, use differnet paths for each project\n        // Default: slicknode-fragments\n        fragmentsPath: 'slicknode-fragments',\n\n        // The prefix for typenames of the types that are added to the Gatsby GraphQL schema\n        // If you are using multiple gatsby-source-slicknode plugin instances, use different namespaces for\n        // each instance.\n        // Default: Slicknode_\n        typePrefix: 'Slicknode_',\n      },\n    }\n  ],\n};\n```\n\n\n## Usage\n\nFor each content type the root query fields will be added to the Gatsby GraphQL schema.\nCheck out the GraphiQL playground for query capabilities: [https://localhost:8000/___graphql](https://localhost:8000/___graphql)\n\n\n## Customizing Fragments\n\nThe `gatsby-source-slicknode` plugin generates fragments for each custom type in your Slicknode schema\nthat implements the `Node` interface. The entire object is then sourced into Gatsby\naccording to the specified fragment. \nThe source plugin creates files for each fragment\nin the directory specified in the config option `fragmentPath` (default to `./slicknode-fragments`).\n\nYou can customize the fragments in the directory to load additional data like\nmany-to-many relations that are not included by default, or you can remove fields\nif you don't want to include certain fields in your Gatsby schema.  \n\n**Note:** When you make changes to existing types in your Slicknode API, you have to update already generated \nfragments to also apply the changes to the Gatsby GraphQL API\n\n\n## Image Transforms\n\nTo use the images with the [gatsby-image](https://www.gatsbyjs.com/plugins/gatsby-image/?=) plugin,\ninstall the required plugins and add them to your configuration:\n\n```javascript\n// In your gatsby-config.js\nmodule.exports = {\n  /* Your site config here */\n  plugins: [\n    {\n      resolve: 'gatsby-source-slicknode',\n      options: {\n        endpoint: 'https://\u003cyour-slicknode-endpoint\u003e',\n        \n        // Enable image download for the transformations\n        downloadImages: true,\n      },\n    },\n    `gatsby-plugin-sharp`,\n    `gatsby-transformer-sharp`,\n  ],\n}\n```\n\nThen use the image fragments of the image sharp plugin to generate optimized images for assets loaded\nfrom the Slicknode API, for example:\n\n```graphql\nquery GetBlogPostsQuery {\n  allSlicknodeBlogPost {\n    edges {\n      node {\n        image {\n          localFile {\n            childImageSharp {\n              fluid {\n                ...GatsbyImageSharpFluid\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n## Sourcing Multiple Slicknode APIs\n\nTo source data from multiple Slicknode APIs, add the configuration for both endpoints\nand choose differnet `fragmentsPath` and `typePrefix` settings for each API, \nfor example:\n\n```javascript\n// In your gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-source-slicknode',\n      options: {\n        endpoint: 'https://\u003cyour-primary-slicknode-endpoint\u003e',\n        fragmentsPath: 'slicknode-fragments-primary',\n        typePrefix: 'SlicknodePrimary_'\n      },\n    },\n    {\n      resolve: 'gatsby-source-slicknode',\n      options: {\n        endpoint: 'https://\u003cyour-secondary-slicknode-endpoint\u003e',\n        fragmentsPath: 'slicknode-fragments-secondary',\n        typePrefix: 'SlicknodeSecondary_'\n      },\n    },\n    // ...\n  ],\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslicknode%2Fgatsby-source-slicknode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslicknode%2Fgatsby-source-slicknode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslicknode%2Fgatsby-source-slicknode/lists"}