Source plugin for pulling data into the Gatsby GraphQL Data Layer from a Directus API.
Depending 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
.
npm install --save gatsby-source-graphql@4 gatsby-source-filesystem@4
npm install --save gatsby-source-graphql@5 gatsby-source-filesystem@5
npm install --save @directus/gatsby-source-directus
- Go to
gatsby-config.js
on your Gatsby project - Add new entry to plugins properly configured with your settings
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",
},
},
},
],
};
- Request your data
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)
}
}
}
}
}
Note: When using with gatsby-transformer-sharp
you will need to query id
of the asset (specified on
DirectusData_directus_files
type).
-
url
[Required] - should be a valid URL to your Directus instance -
auth
[Optional] - defines if requests will have authentication or not. You should define this if you want access to non-public content. View more about permissions-
auth.token
[Optional] - should be the static token of the user which will make the requests. You can define one on user detail page. -
auth.email
[Optional, but required with password and ignored ifauth.token
defined] - should be the email of the user which will make the requests. -
auth.password
[*Optional, but required with email and ignored ifauth.token
defined*] - should be the password of the user which will make the requests.
-
-
type
[Optional] - defines the type and field name to be used on GraphQL. If you are using multiple instances of Directus, please ensure you have unique type and field names per instance.-
type.name
[Optional, defaults toDirectusData
] - defines the GraphQL type name to be used for user defined collections -
type.field
[Optional, defaults todirectus
] - defines the GraphQL field name to query user defined collections. If you change this property, remember to query the proper field insidequery
. -
type.system_name
[Optional, defaults toDirectusSystemData
] - defines the GraphQL type name to be used for Directus defined collections, i.e.,directus_users
,directus_files
, etc. -
type.system_field
[Optional, defaults todirectus_system
] - defines the GraphQL field name to query Directus defined collections.
-
-
dev
[Optional] - defines options for development environmentsdev.refresh
[Optional, defaults to 15s] - tells the refresh rate in seconds of the schema. Should be a number in seconds or a string supported by ms
-
graphql
[Optional] - defines extra options to be passed intogatsby-source-graphql
. Useful for advanced use cases. -
concurrency
[Optional, defaults to10
] - tells how much images tries to download concurrently
The default way to query data is to fetch items from directus
field.
query {
directus {
items {
my_collection {
some_field
other_field
}
}
}
}
If you specify the type.field
, you must query from that field instead.
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
}
}
}
}