{"id":20675899,"url":"https://github.com/directus/gatsby-source-directus","last_synced_at":"2025-07-22T18:33:37.730Z","repository":{"id":63306055,"uuid":"512170655","full_name":"directus/gatsby-source-directus","owner":"directus","description":"Source plugin for pulling data into Gatsby from a Directus API.","archived":false,"fork":false,"pushed_at":"2023-10-19T10:56:14.000Z","size":622,"stargazers_count":11,"open_issues_count":9,"forks_count":14,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-06-25T13:59:17.268Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/directus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/funding.yml","license":null,"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},"funding":{"github":["directus","benhaynes","rijkvanzanten"]}},"created_at":"2022-07-09T11:40:07.000Z","updated_at":"2024-11-17T21:35:35.000Z","dependencies_parsed_at":"2024-06-18T21:12:16.939Z","dependency_job_id":"37168c11-22da-4cc3-a198-06304fa7aab6","html_url":"https://github.com/directus/gatsby-source-directus","commit_stats":{"total_commits":35,"total_committers":11,"mean_commits":"3.1818181818181817","dds":0.6285714285714286,"last_synced_commit":"cfaf883abfbfb4c6f1fe3dc2c08d870a390cf4f6"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/directus/gatsby-source-directus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fgatsby-source-directus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fgatsby-source-directus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fgatsby-source-directus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fgatsby-source-directus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/directus","download_url":"https://codeload.github.com/directus/gatsby-source-directus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/directus%2Fgatsby-source-directus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266552330,"owners_count":23947173,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-16T21:11:04.729Z","updated_at":"2025-07-22T18:33:37.704Z","avatar_url":"https://github.com/directus.png","language":"JavaScript","funding_links":["https://github.com/sponsors/directus","https://github.com/sponsors/benhaynes","https://github.com/sponsors/rijkvanzanten"],"categories":[],"sub_categories":[],"readme":"# gatsby-source-directus\n\nSource plugin for pulling data into the [Gatsby GraphQL Data Layer](https://www.gatsbyjs.com/docs/reference/graphql-data-layer/) from a Directus API.\n\n\n## 5️⃣ Installation for gatsby 4 and 5\nDepending on the `gatsby` version you are using you will need to include the following dependencies to your project on these respective versions: `@4`if you are using `gatsby@4` and `@5` if you are using `gatsby@5`.\n\n### gatsby@4 dependencies\n```bash\nnpm install --save gatsby-source-graphql@4 gatsby-source-filesystem@4\n```\n\n### gatsby@5 dependencies\n```bash\nnpm install --save gatsby-source-graphql@5 gatsby-source-filesystem@5\n```\n\n### Install the package\n```bash\nnpm install --save @directus/gatsby-source-directus\n```\n\n## Usage\n\n1. Go to `gatsby-config.js` on your Gatsby project\n2. Add new entry to plugins properly configured with your settings\n\n```js\nmodule.exports = {\n\t// ... some gatsby configuration\n\tplugins: [\n\t\t// ... some gatsby plugins\n\n\t\t// You can take advantage of the following plugins with gatsby-source-directus\n\n\t\t// `gatsby-plugin-image`,\n\t\t// `gatsby-transformer-sharp`,\n\t\t// `gatsby-plugin-sharp`,\n\n\t\t// Finally our plugin\n\t\t{\n\t\t\tresolve: '@directus/gatsby-source-directus',\n\t\t\toptions: {\n\t\t\t\turl: `https://myproject.directus.cloud`, // Fill with your Directus instance address\n\t\t\t\tauth: {\n\t\t\t\t\ttoken: 'my_secret_token', // You can use a static token from an user\n\n\t\t\t\t\t// Or you can use the credentials of an user\n\t\t\t\t\t// email: \"johndoe@directus.cloud\",\n\t\t\t\t\t// password: \"mysecretpassword\",\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t],\n};\n```\n\n3. Request your data\n\n```graphql\nquery {\n\t# if you change `type.name`, remember to also rename following field\n\tdirectus {\n\t\t# the collection you want to query\n\t\tarticles {\n\t\t\t# the fields you want to query from above collection\n\t\t\ttitle\n\t\t\tfiles {\n\t\t\t\t# since this is a M2M relationship, we need to reference the junction field\n\t\t\t\tdirectus_files_id {\n\t\t\t\t\t# `id` is required to be fetched in order to be used with `gatsby-transformer-sharp`\n\t\t\t\t\tid\n\t\t\t\t\timageFile {\n\t\t\t\t\t\t# when using the plugin 'gatsby-transformer-sharp', you can query images with transformations\n\t\t\t\t\t\tchildImageSharp {\n\t\t\t\t\t\t\tgatsbyImageData(width: 200)\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t# it's also possible to query system collections\n\tdirectus_system {\n\t\tusers {\n\t\t\temail\n\t\t}\n\t\tfiles {\n\t\t\tid\n\t\t\timageFile {\n\t\t\t\tchildImageSharp {\n\t\t\t\t\tgatsbyImageData(width: 200)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n**Note**: When using with `gatsby-transformer-sharp` you will need to query `id` of the asset (specified on\n`DirectusData_directus_files` type).\n\n## Options\n\n- `url` [*Required*] - should be a valid URL to your Directus instance\n\n- `auth` [*Optional*] - defines if requests will have authentication or not. You should define this if you want access\n  to non-public content.\n  [View more about permissions](https://docs.directus.io/configuration/users-roles-permissions/#users-roles-permissions)\n\n  - `auth.token` [*Optional*] - should be the static token of the user which will make the requests. You can define one\n    on user detail page.\n\n  - `auth.email` [*Optional, but required with password and ignored if `auth.token` defined*] - should be the email of\n    the user which will make the requests.\n\n  - `auth.password` [*Optional, but required with email and ignored if `auth.token` defined\\*] - should be the password\n    of the user which will make the requests.\n\n- `type` [*Optional*] - defines the type and field name to be used on GraphQL. If you are using multiple instances of\n  Directus, please ensure you have unique type and field names per instance.\n\n  - `type.name` [*Optional, defaults to `DirectusData`*] - defines the GraphQL type name to be used for user defined\n    collections\n\n  - `type.field` [*Optional*, defaults to `directus`] - defines the GraphQL field name to query user defined\n    collections. If you change this property, remember to query the proper field inside `query`.\n\n  - `type.system_name` [*Optional, defaults to `DirectusSystemData`*] - defines the GraphQL type name to be used for\n    Directus defined collections, i.e., `directus_users`, `directus_files`, etc.\n\n  - `type.system_field` [*Optional*, defaults to `directus_system`] - defines the GraphQL field name to query Directus\n    defined collections.\n\n- `dev` [*Optional*] - defines options for development environments\n\n  - `dev.refresh` [*Optional, defaults to 15s*] - tells the refresh rate in seconds of the schema. Should be a number in\n    seconds or a string supported by [ms](https://github.com/vercel/ms)\n\n- `graphql` [*Optional*] - defines extra options to be passed into `gatsby-source-graphql`. Useful for advanced use\n  cases.\n\n- `concurrency` [*Optional, defaults to `10`*] - tells how much images tries to download concurrently\n\n## How to query\n\nThe default way to query data is to fetch items from `directus` field.\n\n```graphql\nquery {\n\tdirectus {\n\t\titems {\n\t\t\tmy_collection {\n\t\t\t\tsome_field\n\t\t\t\tother_field\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\nIf you specify the `type.field`, you must query from that field instead.\n\n```graphql\nquery {\n\t# In this case `type.field` is \"blog\"\n\tblog {\n\t\titems {\n\t\t\tposts {\n\t\t\t\tid\n\t\t\t\ttitle\n\t\t\t\tslug\n\t\t\t\tstatus\n\t\t\t}\n\t\t}\n\t}\n\t# While in this case `type.field` is \"portal\"\n\tportal {\n\t\titems {\n\t\t\tpages {\n\t\t\t\tid\n\t\t\t\ttitle\n\t\t\t\tslug\n\t\t\t\tstatus\n\t\t\t}\n\t\t}\n\t}\n}\n```\n\n## Docs\n\n[View more about Directus](https://docs.directus.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirectus%2Fgatsby-source-directus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirectus%2Fgatsby-source-directus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirectus%2Fgatsby-source-directus/lists"}