gridsome-source-tomatto-data v1.0.5
Gridsome Data Source Plugin for Tomatto Sites
This plugin will directly pulling data from tomatto server using data model which configured in config.json
which placed inside your project root directory, and then injecting it to Gridsome GraphQL.
How to use
Installing plugin
You can install this plugin with command npm install gridsome-source-tomatto-data
Define config.json
first, you need to define your data model in config.json
. Since this plugin has not automatically created the file, you must create this file manually and placed it inside your project directory. The config.json
will be look like this;
{
"post":{
"description": "Postingan pada website anda",
"content": [
{
"name": "Judul",
"key": "title",
"type": "text",
"browse": "true"
},
{
"name": "Latar",
"key" : "cover",
"type": "image"
},
{
"name": "Konten",
"key": "content",
"type": "rich_text_box"
},
{
"name": "Jenis",
"key": "type",
"type": "select",
"items": [
{
"text": "Beranda",
"value": "home"
},
{
"text": "Profil",
"value": "profile"
},
{
"text": "Header Produk",
"value": "product"
}
]
}
]
}
}
post
is the name of the model. You can freely decide what is the best name to your data model.description
is the description of your model. This will be shown in Tomatto Dashboard.content
is the core of your model. this is where you define the field of your data model. it consisted of;name
is the name of the field.key
representing the field key, which you will be used in your GraphQL query.type
is the type of the field. currently supportedtype
is:text
,textarea
,image
,rich_text_box
, andselect
. More field will be added in the future.browse
is used to determine if the field will appear on Tomatto Dashboard model browse page.items
is a list of selection for the dropdown if your field type isselect
.
Import plugin to gridsome.config.js
You will need to import the plugin into your gridsome.config.js
. Add these lines
{
use: 'gridsome-source-tomatto-data',
options: {
config: 'config.json',
projectId: process.env.PROJECT_ID,
apiUrl: process.env.API_URL
}
}
into the plugins
array inside gridsome.config.js
.
Querying your data
You can start creating your GraphQL query for your page. Please note to add dummy filter id to filter unnecessary data. This is because, currently, Gridsome cannot process an empty collection. In order to be able to run the query, unfortunately, there is a need to add a placeholder data based on each of your model data. Your query is supposed to be like this;
query Home {
welcomePost: allPost(filter: {id: {ne: "dummy"}}) {
edges {
node {
id,
title,
type,
content
}
}
}
}
Run your project
Now you can run your project using gridsome develop
command. This plugin will automatically pulled your data from Tomatto server, and then injects the data into Gridsome GraphQL. You also can test the query from Gridsome's GraphQL Playground located in http://localhost:8080/___explore
.