Newer
Older
# gatsby-source-directus
Source plugin for pulling data into Gatsby from a Directus API.
Forked from https://github.com/directus/gatsby-source-directus
npm install --save @onegeo/gatsby-source-directus
```
## Usage
1. Go to `gatsby-config.js` on your Gatsby project
2. Add new entry to plugins properly configured with your settings
```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: "@onegeo/gatsby-source-directus",
options: {
url: `https://myproject.directus.cloud/directus`, // 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. Request your data
```graphql
query {
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
# 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)
}
}
}
}
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
}
```
**Note**: When using with `gatsby-transformer-sharp` you will need to query `id` of the asset (specified on
`DirectusData_directus_files` type).
## Options
- `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](https://docs.directus.io/configuration/users-roles-permissions/#users-roles-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 if `auth.token` defined*] - should be the email of
the user which will make the requests.
- `auth.password` [*Optional, but required with email and ignored if `auth.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 to `DirectusData`*] - defines the GraphQL type name to be used for user defined
collections
- `type.field` [*Optional*, defaults to `directus`] - defines the GraphQL field name to query user defined
collections. If you change this property, remember to query the proper field inside `query`.
- `type.system_name` [*Optional, defaults to `DirectusSystemData`*] - defines the GraphQL type name to be used for
Directus defined collections, i.e., `directus_users`, `directus_files`, etc.
- `type.system_field` [*Optional*, defaults to `directus_system`] - defines the GraphQL field name to query Directus
defined collections.
- `dev` [*Optional*] - defines options for development environments
- `dev.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](https://github.com/vercel/ms)
- `graphql` [*Optional*] - defines extra options to be passed into `gatsby-source-graphql`. Useful for advanced use
cases.
## How to query
The default way to query data is to fetch items from `directus` field.
```graphql
query {
directus {
items {
my_collection {
some_field
other_field
}
}
}
}
```
If you specify the `type.field`, you must query from that field instead.
```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
}
}
}
}
```
## Docs
[View more about Directus](https://docs.directus.io/)