逐源指令
源代码插件 Gatsby 图形QL 数据层 从Directus API.
5️⃣ 为Gatsby 4和5安装
取决于 gatsby 您正在使用的版本需要包含您的项目对这些版本的以下依赖性: @4如果您正在使用 gatsby@4 财务报告和审定财务报表 @5 如果您正在使用 gatsby@5。 。 。 .
gatsby@ 4 依赖关系
npm install --save gatsby-source-graphql@4 gatsby-source-filesystem@4
gatsby@ 5 依赖关系
npm install --save gatsby-source-graphql@5 gatsby-source-filesystem@5
安装软件包
npm install --save @directus/gatsby-source-directus
使用量
- 转到
gatsby-config.js在您的 Gatsby 项目中 - 将新条目添加到按您设置适当配置的插件中
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: "[email protected]",
// password: "mysecretpassword",
},
},
},
],
};
- 请求数据
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[可选- 确定请求是否有认证。 如果您想要访问, 请定义此定义 到非公开内容. 查看更多权限-
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- 说明计划几秒钟的更新率 应该是数字 秒或由支持的字符串 分钟
-
graphql[可选- 界定拟转成的额外选项gatsby-source-graphql用于高级用途 案例. -
concurrency[可选, 默认为10- 告诉有多少图像试图同时下载
如何查询
查询数据的默认方法是从 directus 字段.
query {
directus {
items {
my_collection {
some_field
other_field
}
}
}
}
如果您指定 type.field,您必须从该字段查询.
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
}
}
}
}