I started using Gatsby along with GraphQL to return a query that lists all galleries that are part of a specific category. In this example the category is called "Lifestyle". This all works successfully and I get an array with all of the Galleries in the category. I also need to sort this array based off a sub field called "date". Is that possible to do via the GraphQL query itself? I tried adding (sort: { fields: [date], order: DESC }) to the gallery field but that didn't work.
Any thoughts on how to achieve this or is this as close as GraphQL can get me to what I need?
Thanks in advance for any help. Still trying to wrap my head around GraphQL.
Ryan
Example of my current query
Could you provide a bit more details about your content model?
If you use a "Reference" field in contentful, it is sadly not possible as of now with the plugin as far as I know.
If you use a "Short text, list" field, like the tags in the default example.
With the default example, you can do the following query:
{
allContentfulPost(filter:{tags:{eq:"fantasy"}}, sort:{fields:[date], order:DESC}) {
edges {
node {
title {
childMarkdownRemark {
html
}
}
slug
date
}
}
}
}
It will give you the following result:
{
"data": {
"allContentfulPost": {
"edges": [
{
"node": {
"title": {
"childMarkdownRemark": {
"html": "<p>Disney Movie</p>"
}
},
"slug": "down-the-rabbit-hole",
"date": "2017-11-26"
}
},
{
"node": {
"title": {
"childMarkdownRemark": {
"html": "<p>Old book</p>"
}
},
"slug": "down-the-rabbit-hole-2",
"date": "1865-11-26"
}
}
]
}
}
}
I came across this same issue as I was trying to sort posts from a category tag that I was using in Contentful. Like #chmac said, you can sort the data from GraphQL with Javascript.
I had to search for a good example, but I finally found one in this Gatsby starter:
Github: https://github.com/ryanwiemer/gatsby-starter-gcn/blob/master/src/templates/tag.js
Live Example: https://gcn.netlify.com/tag/fancy/
You can see in the source file that they sorted the data in a new constant called posts using moment (https://www.npmjs.com/package/moment) and lodash. In my personal example I had to tweak my constant like so:
const courses = orderBy(
this.props.data.contentfulCategory.course,
// eslint-disable-next-line
[object => new moment(object.createdAt)],
['desc']
)
Then I just used a map function like so in the component return:
{/* Courses */}
{courses.map(course => (
<div className="hero__profile" key={course.id}>
<h2>{course.title}</h2>
</div>
))}
I hope this helps!
Related
GraphQL lets you ask for specific fields, the response contains only the fields that you had asked for. For example:
a graphql query like:
{
hero {
name
}
}
will return:
{
"data": {
"hero": {
"name": "R2-D2"
}
}
}
where as a graphQl query like:
{
hero {
name
friends {
name
}
}
}
would return:
{
"data": {
"hero": {
"name": "R2-D2",
"friends": [
{
"name": "Luke"
},
{
"name": "Han Solo"
},
{
"name": "Leia"
}
]
}
}
}
Is there a similar mechanism/library/pattern that can be used in gRPC to achieve the same?
FieldMask is similar in protobuf. It is a list of fields to retain, so the first example would be paths: "hero.name" and the second would be paths: ["hero.name", "hero.friends.name"].
It is probably most frequently used to specify which fields should be changed in an update. But it can equally be used to specify the fields that should be returned.
The server can either process the FieldMask directly (e.g., only using the listed fields in a SELECT SQL query), or it can retrieve all the information and filter the result using FieldMaskUtil.merge() to copy just the requested fields into a new proto message to return to the client.
I was looking at the new graphql endpoint exposed by Magento 2.3.1 and above at the query for listing products:
query products(
pageSize:6,
currentPage:1,
filter:{
category_id: { eq: "3" }
}
) {
filters {
name
request_var
filter_items_count
filter_items {
label value_string
}
}
items {
id
name
small_image {
url
}
# ...
}
# ...
}
The response body yields products in the items property just as expected and a bunch of custom filters in an array in the filters property which look like this:
"filters": [
{
"name": "Activity",
"request_var": "activity",
"filter_items_count": 12,
"filter_items": [
{
"label": "Outdoor",
"value_string": "5"
},
{
"label": "Yoga",
"value_string": "8"
},
{
"label": "Recreation",
"value_string": "9"
},
// rest of filter values
]
},
// rest of filters
]
Given the fact that those filters are dynamic and user defined is there a way of sending them back with a list products query in graphql? I would expect to have a property somewhere under the products query that could be an array of aforementioned filter objects but so far I haven't found anything neither in the schema nor in the official documentation.
Did anyone have any similar experience with this?
No. Theres no way of getting the filtered options sent back. There are options where you can return the additional filtering abilities (similar to when you are viewing a category page) to return list of ways to filter but nothing that returns the current active filters in place.
{
products(filter: {sku: {like: "%"} } pageSize: 500) {
filters{
request_var
name
filter_items{
label
value_string
}
}
items {
id
sku
name
...
}
}
}
I am new to GraphQL and I wonder how I can explore an API without a possible wildcard (*) (https://github.com/graphql/graphql-spec/issues/127).
I am currently setting up a headless Craft CMS with GraphQL and I don't really know how my data is nested.
Event with the REST API I have no chance of just getting all the data, because I have to setup all the endpoints and therefore I have to know all field names as well.
So how could I easily explore my CraftCMS data structure?
Thanks for any hints on this.
Cheers
merc
------ Edit -------
If I use #simonpedro s suggestion:
{
__schema {
types {
name
kind
fields {
name
}
}
}
}
I can see a lot of types (?)/fields (?)...
For example I see:
{
"name": "FlexibleContentTeaser",
"kind": "OBJECT",
"fields": [
{
"name": "id"
},
{
"name": "enabled"
},
{
"name": "teaserTitle"
},
{
"name": "text"
},
{
"name": "teaserLink"
},
{
"name": "teaserLinkConnection"
}
]
But now I would like to know how a teaserLink ist structured.
I somehow found out that the teaserLink (it is a field with the type Entries, where I can link to another page) has the properties url & title.
But how would I set up query to explore the properties available within teaserLink?
I tried all sorts of queries, but I am always confrontend with messages like this:
I would be really glad if somebody could give me another pointer how I can find out which properties I can actually query...
Thank you
As far as I'm concerned currently there is no graphql implementation with that capability. However, if what you want to do is to explore the "data structure", i.e, the schema, you should use schema instrospection, which was thought for that (explore the graphql schema). For example, a simple graphql instrospection query would be like this:
{
__schema {
types {
name
kind
fields {
name
}
}
}
}
References:
- https://graphql.org/learn/introspection/
UPDATE for edit:
What you want to do I think is the following:
Make a query like this
{
__schema {
types {
name
kind
fields {
name
type {
fields {
name
}
}
}
}
}
}
And then find the wished type field to grab more information (the fields) from it. Something like this (I don't know if this works, just an idea):
const typeFlexibleContentTeaser = data.__schema.types.find(t => t === "FlexibleContentTeaser")
const teaserLinkField = typeFlexibleContentTeaser.fields.find(f => f.name === "teaserLink")
const teaserLinkField = teaserLinkField.type.fields;
i.e, you have to transverse recursively through the type field.
I'm looking into GraphQL and got to a question I'm not even sure how to look for in the docs. Probably this isn't even supposed to work, but I'll ask anyway.
I have this query:
query {
organization(login: "facebook") {
repositories(first: 5) {
items: edges {
repo: node {
name
owner {
login
}
}
}
}
}
}
Now, in the response I would like a way to place the login next to name, instead of nested in owner login.
So in the response instead of:
{
...
"name": "react-native",
"owner": {
"login": "facebook"
}
}
I would like to have:
{
...
"name": "react-native",
"ownerName": "facebook"
}
Thank you.
From the specification this is not possible. The response has to be shaped in the way the object types are shaped. There is a project called GraphQL Lodash that gives you a new directive to modify the results. It can be helpful here but it is rather experimental and IMO very undogmatic.
Firebase Data is structured as JSON. As per the best practice we should create denormalised form of Data. We should push same data in different nodes. As per their documentation it is okay to duplicate data in different branch.
How should I structure this data in Firebase?
I am writing a blogging application that was there in PARSE and wants to migrate to Firebase .
Each of my Blog is having different hashTags. These HashTags are clickable. So when we click a particular hashTag it will redirect to a page with common blogs having same hashTags .
How do we conceptualize above hash tag behaviour in Firebase.
How to structure the data so that i can query all blogs for a particular hashtag ?
like select * from [blogs] where tag = '#hashtag'
Try this
blogs
blog_01
hashtag:"#hashtag"
data: "some data"
blog_02
hashtag: "#anotherHashtag"
data: "more data"
blog_03
hashtag: "#superHashtag"
data: "another data"
and the code
ref = rootRef.childByAppendingPath("blogs")
ref.queryOrderedByChild("hashtag").queryEqualToValue("#anotherHashtag")
.observeEventType(.Value, withBlock: { snapshot in
//.Value can return multiple nodes within the snapshot so iterate over them
for child in snapshot.children {
let hash = child.value.objectForKey("data") as! String
print(hash) //prints 'more data'
}
})
Edit: This is OS X Swift code but you can get the general idea as it applies across platforms.
I think Firebase wants you to do something similar to this:
{
"blogs": {
"blog1": {
"name": "blogpost1",
"text": "blogpost1 text"
"tags": {
"tag1": true,
"tag2": true,
"tag3": true
}
},
"blog2": {
"name": "blogpost2",
"text": "blogpost2 text"
"tags": {
"tag1": true
}
},
"blog3": {
"name": "blogpost3",
"text": "blogpost3 text"
"tags": {
"tag1": true
}
}
}
{
"tags": {
"tag1": {
"blog1": true,
"blog2":true,
"blog3":true,
},
"tag2": {
"blog1":true
},
"tag3": {
"blog1":true
}
}
}
I hope this helps. Essentially you would query your tags json with the each tag containing the key for a respective blog post. A good next step would be to probably, as opposed to putting true as a value in the tags, put a date so that you can order the post in your search results sequentially.
Post what you came up with as a solution please.