# @directus/gatsby-source-directus 中文文档 规范地址：https://npmcn.com/package/%40directus/gatsby-source-directus/ 版本：9\.16\.2 npm 元数据更新时间：2026-06-05T15:48:02.069Z 中文译文更新时间：2026-11-12T12:17:08.556Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40directus/gatsby-source-directus 原文对照：https://npmcn.com/package/%40directus/gatsby-source-directus/?lang=original 项目主页：https://github.com/directus/gatsby-source-directus#readme 源码仓库：https://github.com/directus/gatsby-source-directus ## 关键信息（来自 npm 元数据） - 包体积（解压后）：19.9 kB，11 个文件 - TypeScript 类型：未声明 - 运行依赖：3 个 - peer 依赖：eslint 7\|\|8，gatsby-source-graphql 4\|\|5，gatsby-source-filesystem 4\|\|5 - 首次发布：2020-01-09T20:23:37.296Z - 最新版本发布：2023-09-19T16:43:57.425Z - 近 30 天下载量：4328（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：124（近 12 个月 0 个） ## 中文简介 从 Directus API 中将数据拖入 Gatsby 的源插件 . ## 安装 ```sh npm install @directus/gatsby-source-directus ``` 也可以使用：`pnpm add @directus/gatsby-source-directus`、`yarn add @directus/gatsby-source-directus`、`bun add @directus/gatsby-source-directus` ## README # 逐源指令 源代码插件 [Gatsby 图形QL 数据层](https://www.gatsbyjs.com/docs/reference/graphql-data-layer/) 从Directus API. ## 5️⃣ 为Gatsby 4和5安装 取决于 `gatsby` 您正在使用的版本需要包含您的项目对这些版本的以下依赖性: `@4`如果您正在使用 `gatsby@4` 财务报告和审定财务报表 `@5` 如果您正在使用 `gatsby@5`。 。 。 . ### gatsby@ 4 依赖关系 ```bash npm install --save gatsby-source-graphql@4 gatsby-source-filesystem@4 ``` ### gatsby@ 5 依赖关系 ```bash npm install --save gatsby-source-graphql@5 gatsby-source-filesystem@5 ``` ### 安装软件包 ```bash npm install --save @directus/gatsby-source-directus ``` ## 使用量 1. 转到 `gatsby-config.js` 在您的 Gatsby 项目中 2. 将新条目添加到按您设置适当配置的插件中 ```js module.exports = { // ... some gatsby configuration plugins: [ // ... some gatsby plugins // You can take advantage of the following plugins with gatsby-source-directus // `gatsby-plugin-image`, // `gatsby-transformer-sharp`, // `gatsby-plugin-sharp`, // Finally our plugin { resolve: '@directus/gatsby-source-directus', options: { url: `https://myproject.directus.cloud`, // Fill with your Directus instance address auth: { token: 'my_secret_token', // You can use a static token from an user // Or you can use the credentials of an user // email: "johndoe@directus.cloud", // password: "mysecretpassword", }, }, }, ], }; ``` 3. 请求数据 ```graphql query { # if you change `type.name`, remember to also rename following field directus { # the collection you want to query articles { # the fields you want to query from above collection title files { # since this is a M2M relationship, we need to reference the junction field directus_files_id { # `id` is required to be fetched in order to be used with `gatsby-transformer-sharp` id imageFile { # when using the plugin 'gatsby-transformer-sharp', you can query images with transformations childImageSharp { gatsbyImageData(width: 200) } } } } } } # it's also possible to query system collections directus_system { users { email } files { id imageFile { childImageSharp { gatsbyImageData(width: 200) } } } } } ``` **说明**: 当使用时 `gatsby-transformer-sharp` 您需要查询 `id` 资产 `DirectusData_directus_files` 类型). ## 选项 - `url` \[_需求_\- 应是一个有效的 URL 到您的 Directus 实例 - `auth` \[_可选_\- 确定请求是否有认证。 如果您想要访问, 请定义此定义 到非公开内容. [查看更多权限](https://docs.directus.io/configuration/users-roles-permissions/#users-roles-permissions) - `auth.token` \[_可选_\- 应为提出请求的用户的静态符号。 您可以定义一个 在用户细节页面上. - `auth.email` \[_可选,但需要密码,如果 `auth.token` 定义_\- 应该是电子邮件 将提出请求的用户. - `auth.password` \[\*可选,但需用电子邮件,如果 `auth.token` 定义 \* - 应为密码 用户. - `type` \[_可选_\- 定义用于GraphQL的类型和字段名称。 如果您正在使用多个实例 Directus 请确保您每个实例都有独特的类型和字段名称 . - `type.name` \[_可选, 默认为 `DirectusData`_\] - 定义用于用户定义的 GraphQL 类型名称 收藏 - `type.field` \[_可选_,默认为 `directus`\] - 为查询用户定义的 GraphQL 字段名称定义 藏书. 如果您更改此属性, 请记住查询内部的合适字段 `query`。 。 。 . - `type.system_name` \[_可选, 默认为 `DirectusSystemData`_\- 定义要用于 Directus定义的收藏,即, `directus_users`, (中文(简体) ), `directus_files`等 (中文(简体) ). - `type.system_field` \[_可选_,默认为 `directus_system`\- 定义 GraphQL 字段名以查询 Directus 定义收藏. - `dev` \[_可选_\- 确定发展环境的选择 - `dev.refresh` \[_可选, 默认为 15s_\- 说明计划几秒钟的更新率 应该是数字 秒或由支持的字符串 [分钟](https://github.com/vercel/ms) - `graphql` \[_可选_\- 界定拟转成的额外选项 `gatsby-source-graphql`用于高级用途 案例. - `concurrency` \[_可选, 默认为 `10`_\- 告诉有多少图像试图同时下载 ## 如何查询 查询数据的默认方法是从 `directus` 字段. ```graphql query { directus { items { my_collection { some_field other_field } } } } ``` 如果您指定 `type.field`,您必须从该字段查询. ```graphql query { # In this case `type.field` is "blog" blog { items { posts { id title slug status } } } # While in this case `type.field` is "portal" portal { items { pages { id title slug status } } } } ``` ## 文档 [查看更多关于 Directus](https://docs.directus.io/) ## 常见问题 ### @directus/gatsby-source-directus 是什么？ 从 Directus API 中将数据拖入 Gatsby 的源插件 \. ### 如何安装 @directus/gatsby-source-directus？ 在项目目录运行 npm install @directus/gatsby-source-directus，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：eslint（7\|\|8）、gatsby-source-graphql（4\|\|5）、gatsby-source-filesystem（4\|\|5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @directus/gatsby-source-directus 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/directus\_\_gatsby-source-directus 是否存在。 ### @directus/gatsby-source-directus 可以商用吗？ @directus/gatsby-source-directus 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @directus/gatsby-source-directus 的下载量有多少？ 根据 npm 官方下载统计，@directus/gatsby-source-directus 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,328 次，日均约 144 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @directus/gatsby-source-directus 还在维护吗？ 最新版本 9\.16\.2 发布于 2023/09/20（3 年前）；至今共发布 124 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。