I am pretty new to graphql, so my question might sound a bit strange. it may not be correct way of doing what I need, but I can't think of any other way.
Basically, I would like to know how I can use an ID i am being returned from my graphql query and use that ID in the second query to render the data I need.
currently my full query looks like:
export const query = graphql`
query myQuery {
allSanityFrontpage {
nodes {
content {
... on SanityHero {
_key
_type
heroIntro
heroHeader
heroButtonText
heroProjectReference {
id
title
slug {
current
}
}
}
}
}
}
sanityProject(id: { eq: "-8571b76b-8cfd-55cf-b848-151586f5c57a" }) {
id
title
coverImage {
asset {
title
fluid(maxWidth: 800) {
...GatsbySanityImageFluid
}
}
}
}
}
`;
I am getting an ID returned from this part of the query
heroProjectReference {
id
And currently I am using that ID statically to render the content I need by doing this:
sanityProject(id: { eq: "-8571b76b-8cfd-55cf-b848-151586f5c57a" }) {
id
title
How do I replace that static ID with something dynamic, so I can update my CMS and see whatever project I have updated it to be?
Client-side you must call the chained queries serially, populating the ID in the dependent query with the output from the first query.
Server-side, of course, you can combine the two in the resolver.
Related
I'm attempting to use the GitHub ProjectV2 API to query a GitHub Projects beta project to obtain the title or a given GitHub Project Item.
Unfortunately, I'm not well-versed in GraphQL and struggling to complete the query. What am I missing from the following GraphQL query to get this to work?
query {
node(id: \"PROJECT_NODE_ID\") {
... on ProjectV2 {
items(id:\"PROJECT_ITEM_ID\")
}
}
content{
... on DraftIssue {
title
}
}
}
As written, this returns the following error:
Field must have selections (field 'items' returns ProjectV2ItemConnection but has no selections. Did you mean 'items { ... }'?)"}
You're almost there, but there are two issues here:
items returns a Connection, which means you still need to include another set of curly braces to "select" which fields you'd like.
The GitHub ProjectsV2 API doesn't look like it supports selection of individual items yet, only paginating through a list of items. This means that what you actually want to use is something like:
query {
node(id: \"PROJECT_NODE_ID\") {
... on ProjectV2 {
items(first: 10) {
nodes {
content {
... on DraftIssue {
title
}
}
}
}
}
}
}
So I'm trying to learn graphql I've been playing around with the ENS subgraph on the graph
I've figured out how to do simple filtering but when I try to write more complex filters they do not compile.
I'm trying to get the top 5 transactions for the each of the top 5 domains. (e.g for each domain I want the top 5 transactions)
{
#Sample Query to get the first 5 domains (not needed for question but used to validate results)
domains(first: 5) {
id
name
labelName
labelhash
}
#attempt to filter the transfer.domain.id by TOP 5 domains.id
transfers(where: { domain { id: domains(first: 5) { id } } }) {
id
domain {
id
}
blockNumber
transactionID
}
}
EDIT I'm going to attempt to simplify my request since I'm not sure nesting queries is possible. How can I filter an inner query by Id:
transfers(where: {domain.id: "0x9c0fc2519ae862cee27778e5c34714d6c7e3ca21ad572df47ad9f6fe530909bd"}) {
id
domain {
id
}
blockNumber
transactionID
}
NOTE: Domain.Id = does not compile how would I write a filtered query like that?
However, My filter doesn't compile syntactically. How can I write a query which filters by a child property?
You can query like this
query {
getPost(id: "0x1") {
title
text
datePublished
}
}
Got this from https://dgraph.io/docs/graphql/queries/search-filtering/
I am using Prismic, and I have two identical custom types, one is called Content and one is called Theme. Their data is identical so I would like to reuse my fragments, is it possible?
An example fragment looks like:
import { graphql } from 'gatsby'
export const CollectionFragment = graphql`
fragment CollectionFragment on PrismicContentBodyCollection {
...
}
`
So right now it is hardcoded to PrismicContentBodyCollection.
A GraphiQL example would look like:
query MyQuery {
allPrismicTheme {
nodes {
data {
body {
... on PrismicThemeBodyHero {
slice_type
}
}
}
}
}
allPrismicContent {
nodes {
data {
body {
... on PrismicContentBodyHero {
slice_type
}
}
}
}
}
}
I'm not 100% sure, but I don't think this is possible because it needs to be specified with the type that matches the type of document you're looking for to make sure that your query is valid and that the fields you are trying to receive actually exist on the object.
So in your case, if you're looking for the Collection Slice, the fragments would need to be
PrismicThemeBodyCollection and PrismicContentBodyCollection respectively.
I have made a few tests myself and I keep getting errors that say I'm missing the correct content type name
I'm making a webpage for a language school and am now trying to create pages about languages taught there. They're supposed to include the name of the language, a short descroption and a list of schedule items related to them. In Netlify CMS I made 2 collections for them. One of them has the general language information and the other one includes the schedule items.
What I would like to do when I enter a language's webpage is get the general infromation from the language_pages collection and an array of schedule_items with the same value in the language field, but I'm kind of scratching my head trying to figure out how to do it.
Each of the 2 collections includes a templateKey field, which differentiates between the collections. The values are language-post for general language information and schedule-item for schedule items.
My basic query to get a single language page is the following:
query {
markdownRemark(frontmatter: { language: { eq: "Niemiecki" }}) {
html
frontmatter {
language
description
}
}
}
The field language also exists in the schedule item collection, so I'm thinking I should somehow use it to filter through the collection. I'm a complete graphQL noob, however and I haven't really found and example of what I'm trying to do here being done. My complete bodge-job resulted in something like this:
query {
markdownRemark(frontmatter: { language: { eq: "Niemiecki" }}) {
html
frontmatter {
language
description
}
children {
id
group
room
time
}
}
}
Which doesn't even execute properly and I'm honestly out of ideas how I could make it work.
You can do 2 queries side by side & filter by folder name with regex:
query LanguageInfo($lang: String) {
languagePage: markdownRemark(
frontmatter: { language: { eq: $lang }},
fileAbsolutePath: {
regex: "/your-language-folder-name/"
}
) {
frontmatter { ... }
}
scheduledItem: markdownRemark(
frontmatter: { language: { eq: $lang }},
fileAbsolutePath: {
regex: "/your-schedule-folder-name/"
}
) {
frontmatter { ... }
}
}
lang could be a variable you pass into createPage action when you create page programmatically. You can then use it in your page template's query. Example from the doc in case you need it:
createPage({
path: `/my-sweet-new-page/`,
component: path.resolve(`./src/templates/my-sweet-new-page.js`),
// The context is passed as props to the component as well
// as into the component's GraphQL query.
context: {
lang: `english`,
},
})
languagePage & scheduledItem are alias name that make it easier to retrieve your data. You can access the data like data.languagePage... & data.scheduledItem...
Let me know if that helps.
I have a gatsby site with the contentful plugin and graphql queries (setup is working).
[EDIT]
My gatsby setup pulls data dynamically using the pageCreate feature. And populates my template component, the root graphql query of which I've shared below. I can create multiple pages using the setup if the pages on contentful follow the structure given in the below query.
[/EDIT]
My question is about a limitation I seemed to have come across or just don't know enough grpahql to understand this yet.
My high level content model 'BasicPageLayout' consists of references to other content types through the field 'Section'. So, it's flexible in terms of which content types are contained in the 'BasicPageLayout' and the order in which they are added.
Root page query
export const pageQuery = graphql`
query basicPageQuery {
contentfulBasicPageLayout(pageName: {eq: "Home"}) {
heroSection {
parent {
id
}
...HeroFields
}
section1 {
parent {
id
}
...ContentText
}
section2 {
parent {
id
}
...ContentTextOverMedia
}
section3 {
parent {
id
}
...ContentTextAndImage
}
section4 {
parent {
id
}
...ContentText
}
}
}
The content type fragments all live in the respecitve UI components.
The above query and setup are working.
Now, I have "Home" Hard coded because I'm having trouble creating a flexible reusable query. I'm taking advantage of contentful's flexible nature when creating the models, but haven't found a way to create that flexibility in the graphql query for it.
What I do know:
Graphql query is resolved at run time, so everything that needs to be fetched should be in that query. It can't be 'dynamic'.
Issue: The 'Section' fields in the basicPageLayout can link to any content type. So we can mix and match the granular level content types. How do I add the content type fragment (like ContentTextAndImage vs ContentText) so it is appropriate for that section instance ('Section' field in the query)?
In other words
I'd like the root query to get 'Home' data which might have 4 sections, all of type - ContentTextOverMedia
as well as 'About ' data that might have also have 4 sections but with alternating types - ContentText and ContentTextAndImage
This is the goal because I want to create content (Pages) by mix-matching content types on contentful, without needing to update the code each time a new Page is created. Which is why Contentful is useful and was picked in the first place.
My ideas so far:
A. Run two queries, in series. One fetches the parent.id on each section and that holds the content type info. Second fetches the data using the appropriate fragment.
B. Fetch the JSON file of the basicPageLayouts content instance (such as 'Home') separately through Contentful API, and using that JSON file create the graphql string to be used in each instance (So, different layout for Home, About, and so on)
This needs more experimentation, not sure if it's viable, could also be more complex then it needs to be.
So, please share thoughts on the above paths that I'm exploring or another solution that I haven't considered using graphql or gatsby's features.
This is my first question on SO btw, I've spent some time on refining it and trying to follow the guidelines but please do give me feedback in comments so I can improve even if you don't have an answer to my question.
Thanks in advance.
If I understood correctly you want to create pages dynamically from the data coming from Contentful.
You can achieve this using the Gatsbyjs Node API specifically createPage.
In your gatsby-node.js file you can have something like this
const fs = require('fs-extra')
const path = require('path')
exports.createPages = ({graphql, boundActionCreators}) => {
const {createPage} = boundActionCreators
return new Promise((resolve, reject) => {
const landingPageTemplate = path.resolve('src/templates/landing-page.js')
resolve(
graphql(`
{
allContentfulBesicPageLayout {
edges {
node {
pageName
}
}
}
}
`).then((result) => {
if (result.errors) {
reject(result.errors)
}
result.data.allContentfulBesicPageLayout.edges.forEach((edge) => {
createPage ({
path: `${edge.node.pageName}`,
component: landingPageTemplate,
context: {
slug: edge.node.pageName // this will passed to each page gatsby create
}
})
})
return
})
)
})
}
Now in your src/templates/landing-page.js
import React, { Component } from 'react'
const LandingPage = ({data}) => {
return (<div>Add you html here</div>)
}
export const pageQuery = graphql`
query basicPageQuery($pageName: String!) {
contentfulBasicPageLayout(pageName: {eq: $pageName}) {
heroSection {
parent {
id
}
...HeroFields
}
section1 {
parent {
id
}
...ContentText
}
section2 {
parent {
id
}
...ContentTextOverMedia
}
section3 {
parent {
id
}
...ContentTextAndImage
}
section4 {
parent {
id
}
...ContentText
}
}
}
note the $pageName param that's what was passed to the component context when creating a page.
This way you will end up creating as many pages as you want.
Please note: the react part of the code was not tested but I hope you get the idea.
Update:
To have a flexible query you instead of having your content Types as single ref field, you can have one field called sections and you can add the section you want there in the order you desire.
Your query will look like this
export const pageQuery = graphql`
query basicPageQuery($pageName: String!) {
contentfulBasicPageLayout(pageName: {eq: $pageName}) {
sections {
... on ContentfulHeroFields {
internal {
type
}
}
}
}
Khaled