What is the purpose of the Merge button in GraphiQL UI. It seems to be doing the same thing as the Prettify button.
Please provide an example
The Merge button is used for flattening a query with defined fragments.
It is different from Prettify which retains the original query but just indents it.
Using the GraphiQL netify demo schema, the following query is "Prettified"
query {
test {
person {
name
age
...friendNames
}
}
}
fragment friendNames on Person {
friends {
name
}
}
When clicking the Merge button the result is as follows:
{
test {
person {
name
age
friends {
name
}
}
}
}
To see a live demo of the above, you can follow this link
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'm trying to retrieve product metafields on BigCommmerce via GraphQL. The below code throws an error
query {
site {
product(entityId:639) {
sku
path
metafields(namespace: "App_Namespace", keys: "color_key") {
edges {
node {
id
value
}
}
}
}
}
}
Meta field information
Namespace App_Namespace
Key color_key
Description Colour
Value Blue | Grey | Yellow
Would appreciate any help on above. Thanks
The "keys" argument expects an array of keys. So even if you just want one key, submit it as an array of one:
query {
site {
product(entityId: 639) {
sku
path
metafields(namespace: "App_Namespace", keys: ["color_key"]) {
edges {
node {
id
value
}
}
}
}
}
}
Check out this link for more examples:
https://developer.bigcommerce.com/changelog#posts/graph-ql-storefront-api-updates-metafields-on-product-category-brand-variant
You also need to make sure that these requirements are met,
otherwise, even if the query is correct, you won't be able to get the metafields in the query:
The metafield must be marked with a permission_set of read_and_sf_access or write_and_sf_access in order to be exposed to the API. Metafields with any other permission value will be hidden.
I'm making a blog with Gatsby front-end, Strapi back-end. I made a query in component with StaticQuery
query={graphql`
query {
allStrapiArticle {
edges {
node {
strapiId
title
category {
name
}
image {
url
}
}
}
}
}
`}
All of field is work fine without image{url}. I got error: error Cannot query field "url" on type "File" graphql/template-strings. How can I fix it? Thanks!
I have faced this problem too. Tutorial on Strapi suggest to query with 'url' but it's wrong.
The right way to query is to do:
allStrapiArticle {
edges {
node {
strapiId
title
category {
name
}
image {
publicURL
}
}
}
}
In order to display image, don't forget to swap url into publicURL like that:
<img
src={article.node.image.publicURL}
alt={article.node.image.publicURL}
height="100"
/>
Despite you've created an image object with an url field in Strapi, Strapi + Gatsby downloads it and you must change a bit your query.
At this point, all your images belong to gatsby-source-filesystem so they must be queried in a different way. Of course, you can get the url but your data structure may differ from the one you've created in Strapi's back office. In other words, the field you are looking for is inside another object, in this case, the publicURL will contain your desired url value. Here's a sample of how to get one or multiple images:
singleImage {
publicURL
}
multipleImages {
localFile {
publicURL
}
}
Reference: https://github.com/strapi/gatsby-source-strapi
Take a look at the autocompletion when you run a gatsby develop under localhost:8000/___graphql playground to test your GraphQL query, it may help you to get the fields you need.
This tutorial also points out some interesting stuff.
If you want to use a gatsby-image-based image, you can use:
image {
childImageSharp {
fluid(maxWidth: 960) {
...GatsbyImageSharpFluid
}
}
}
Then it should be used in a loop something like (with gatsby-image usage):
<Img fluid={data.allStrapiArticle.edges[position].index.image.childImageSharp.fluid} />
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.