Gatsby, how to do "join" with graphql? - graphql

I use gatsby and netlify-cms.
My schema:
collections:
- name: "tags"
label: "Tags"
folder: "src/data/tags"
create: true
slug: "{{slug}}"
fields:
- {label: "Id", name: "title", widget: "string"}
- {label: "Description", name: "description", widget: "text"}
- name: "posts"
label: "Posts"
folder: "src/data/posts"
create: true
slug: "{{slug}}"
fields:
- {label: "Id", name: "title", widget: "string"}
- label: "Tags"
name: "tags"
widget: "list"
fields:
- label: "Tag"
name: "tag"
widget: "relation"
collection: "tags"
searchFields: ["name", "description"]
valueField: "title"
displayFields: ["name"]
My query:
query PostByID($id: String!) {
markdownRemark(id: { eq: $id }) {
id
html
frontmatter {
id: title
description
tags {
tag
// get tag description????
}
}
}
}
Is there a way to get tag description? I'm trying to use fragments, but it doesn't work. I asked this question as issue on Gatsby GitHub, I was advised this example:
fragment tagDetails on Tag {
title
description
}
and with this usage:
tag {
...tagDetails
}
I get this error:
"Field \"tag\" must not have a selection since type \"String\" has no subfields."

Related

How to access .yml file at root in Netlify CMS?

I'm trying to give Netlify CMS access to a data file containing authors for a blog site, but I haven't been able to get the records from the root of the file. I need the records to be at the root because of the site generator I'm using. Is there anything I can replace the asterisks with to accomplish this?
- name: "settings"
label: "Settings"
files:
- name: "authors"
label: "Authors"
file: "_data/authors.yml"
fields:
- name: "*****"
label: "Authors"
widget: "list"
fields:
- {label: "Name", name: "name", widget: "string"}
- {label: "Last Name", name: "last_name", widget: "string"}
- {label: "First Name", name: "first_name", widget: "string"}
- {label: "Display Name", name: "display_name", widget: "string"}
- {label: "Bio", name: "bio", widget: "markdown"}

How to add image upload functionality in Netlify CMS

Hi I'm new to Netlify CMS I just learned about it from a blog
so I have config.yml that creates two input fields in Netlify CMS
Sample:
collections:
- name: 'team'
label: 'Team'
folder: 'src/team'
create: true
slug: '{{slug}}'
fields:
- { label: 'Team Member', name: 'title', widget: 'string' }
- { label: 'Bio', name: 'bio', widget: 'markdown' }
I'm just wondering how can I add input field for the image
Thanks!
Just add
{ label: "Image", name: "thumbnail", widget: "image"}
into one of your fields
collections:
- name: 'team'
label: 'Team'
folder: 'src/team'
create: true
slug: '{{slug}}'
fields:
- { label: 'Team Member', name: 'title', widget: 'string' }
- { label: 'Bio', name: 'bio', widget: 'markdown' }
- { label: "Image", name: "thumbnail", widget: "image"}
Source: https://www.netlifycms.org/docs/add-to-your-site/

how to add a link to Kendo TreeList

I have the following code:
var mdl = #Html.Raw(Json.Encode(Model.FacilityList));
var ds = new kendo.data.TreeListDataSource({
data: mdl,
schema: {
model: {
id: "ClientOrganizationId",
fields: {
parentId: { field: "ParentOrganizationId", nullable: true },
ClientOrganizationId: { field: "ClientOrganizationId", type: "number" },
Name: { field: "Name"},
Street: { field: "Street" },
City: { field: "City" },
State: { field: "State" },
ZipCode: { field: "Zipcode" }
},
expanded: true
}
}});
$("#treelist").kendoTreeList({
dataSource: ds,
selectable: true,
columns: [
{ field: "Name", title: "Organization Name"},
{ field: "Contracted", title: "Contracted"},
{ field: "ClientOrganizationId", title: "Id"},
{ field: "Street", title: "Street"},
{ field: "City", title: "City" },
{ field: "State", title: "State" },
{ field: "ZipCode", title: "ZipCode"}]});
How would I add another column that contains an actionlink to the "Home" controller's "Update" action passing the ClientOrganizationId as a parameter?
I want the Update action to be something like this
public ActionResult Update(int Id)
{
}
You use a column template; basically something like:
{
field: "ClientOrganizationId",
title: "Id link",
template: "<a href='/Home/Update/#= ClientOrganizationId #'>" +
"link me to id: #= ClientOrganizationId # </a>"
},
I.e. fill in whatever is needed to call the Update action while writing the id value with
#= ClientOrganizationId #
(I don't remember the link semantics offhand, so the href part may be very wrong)

Kendo Grid Date Sort not working properly with M/d/yy

I have scoured the interwebs and have not been able to conclude why this is not working as I see in so many demos. I must be missing something simple... except most examples don't use the M/d/yy format for the dates. When I use this format, my data ends up with a column like:
1/19/14
10/05/14
2/02/14
5/15/14
Any ideas? You can see I have my date column template commented out because it wasn't actually doing anything that made a difference.
Here's my Grid:
$("#mygiving-details-grid").kendoGrid({
dataSource: {
schema: {
model: {
fields:{
date: {type: "date"},
fund: {type: "string"},
desc: {type: "string"},
name: {type: "string"},
type: {type: "string"},
amt: {type: "number"}
}
}
}
},
sortable: true,
toolbar: "<span>Filter goes here</span>",
columns: [{
field: "date",
title: myGivingModel.local.giving.date,
// format: "{0:"+systemDateFormat+"}",
// template: "#= kendo.toString(date, '"+systemDateFormat+"') #",
width: 100
}, {
field: "fund",
title: myGivingModel.local.giving.fund
}, {
field: "desc",
title: myGivingModel.local.giving.description
}, {
field: "name",
title: myGivingModel.local.giving.name
}, {
field: "type",
title: myGivingModel.local.giving.type
}, {
field: "amt",
title: myGivingModel.local.giving.amount,
attributes:{
style:"text-align:right;"
},
format: "{0:c}"
}]
});
When using https://github.com/StefH/KendoGridBinderEx this should just work fine. I just changed in the Scripts\common.js this code:
var _DefaultDateFormat = "MM/dd/yyyy";
// into this
var _DefaultDateFormat = "M/dd/yy";
and the sorting works as expected.

How to enable editing for a single column in Kendo Grid

I want to enable editing only for Address field for the below code:
$("#grid").kendoGrid({
columns: [{
field: "name",// create a column bound to the "name" field
title: "Name",// set its title to "Name"
},
{
field: "age",// create a column bound to the "age" field
title: "Age" ,// set its title to "Age"
},
{
field: "doj",
title: "DOJ",
},
{
field: "address",
title: "ADDRESS",
},
{ command: [{ name: "destroy", text: "Remove" }, { name: "edit", text: "edit" }] }],
editable: "popup",
sortable:true,
dataSource: [{ name: "Jane", age: 30, address: "Bangalore", }, { name: "John", age: 33, address: "Hyderabad" }]
});
Define editable: false & nullable: true to column of database schema.
dataSource = new kendo.data.DataSource({
..
schema: {
model: {
id: "YourID",
fields: {
YourID: { editable: false, nullable: true },
address: { editable: false, nullable: true },
..
..
}
}
}
..
})
You have to set editable: false to the columns.
model: {
fields: {
ProductID: {
editable: false
}
}
}

Resources