Gatsby GraphQL query no longer working after update - graphql

So I had this graphql query on my gatsby site before they updated and now it no longer works.
query ($skip: Int!, $limit: Int!) {
allMdx(
filter: { fileAbsolutePath: { regex: "/posts/" } }
sort: { order: DESC, fields: frontmatter___date }
skip: $skip
limit: $limit
) {
nodes {
id
frontmatter {
alt
title
path
slug
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
It says "fileAbsolutePath" is not defined by type mdxfilterinput
I don't know what other way to update this to make it show my data again because the other options don't make sense
What would I use in replace of fileabsolutepath for my graph ql query to work again with the new updated gatsby version?

Related

Gatsby custom Remark frontmatter variables not being passed into index.js

first question on StackOverflow!
Using the Gatsby blog template, I've modified the graphql query and verified that it returns the correct data in GraphiQL, which is being pulled from a "redirect:" property in the blog post frontmatter.
Unfortunately it isn't being passed in the data when running the index.js file.
gatsby-config.js
feeds: [
{
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.nodes.map(node => {
return Object.assign({}, node.frontmatter, {
description: node.excerpt,
redirect: node.frontmatter.redirect,
date: node.frontmatter.date,
url: site.siteMetadata.siteUrl + node.fields.slug,
guid: site.siteMetadata.siteUrl + node.fields.slug,
custom_elements: [{ "content:encoded": node.html }],
})
})
},
query: `
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] },
) {
nodes {
excerpt
html
fields {
slug
}
frontmatter {
redirect
title
date
}
}
}
}
`,
output: "/rss.xml",
},
],
gatsby-node
type Frontmatter {
redirect: String
title: String
description: String
date: Date #dateformat
}
My code repository, https://github.com/tomvaillant/my_blog
Thanks for any support!
You need to query for the redirect field in the same way you do in the gatsby-config. Your query should look like:
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
nodes {
excerpt
fields {
slug
}
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
description
redirect # <-- here
}
}
}
}
`

GraphQL filtering/sorting DatoCMS GatsbyJS

I have the following GraphQL query:
export const query = graphql`
query NewsQuery($slug: String!) {
datoCmsNews(slug: { eq: $slug }) {
id
title
description
slug
meta {
publishedAt
}
cover {
fluid(maxHeight: 530) {
...GatsbyDatoCmsSizes
}
}
}
allDatoCmsNews(sort: { fields: [meta___publishedAt], order: DESC }, limit: 4) {
edges {
node {
id
title
slug
meta {
publishedAt
isValid
status
}
cover {
fluid(maxHeight: 375) {
...GatsbyDatoCmsSizes
}
}
}
}
}
}
`;
On my allDatoCmsNews query how would I go about about sorting/filtering out a News item where a $slug is equal to the current slug? I don't want to show a News item if that news item is currently being viewed. I'm guessing I would have to use neq just struggling with the correct syntax.
Thanks
Pretty trivial using filter:
allDatoCmsNews(sort: { fields: [meta___publishedAt], order: DESC }, limit: 4, filter: {slug: {ne: $slug}})

How to work around GraphQL error, field "x" must not have a selection since type "String" has no subfields

I am using Gatsby and GraphQL, and I am new to GraphQL.
I have the following schema definition:
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions;
const typeDefs = `
type MarkdownRemark implements Node {
frontmatter: Frontmatter
}
type Frontmatter {
title: String!
products: [Product]
}
type Product #dontInfer {
name: String!
price(price: Int = 1): Float
description: String
images: [ProductImage]
}
type ProductImage {
url: String
}
`;
createTypes(typeDefs);
};
Then on my page I use the following query:
query {
markdownRemark(fileRelativePath: { eq: "/content/pages/products.md" }) {
...TinaRemark
frontmatter {
title
products {
name
price
description
images {
url {
childImageSharp {
fluid(maxWidth: 1920) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
}
}
html
}
}
I then receive the following error:
Field "url" must not have a selection since type "String" has no subfields.
Does anyone have any suggestions on how to work around this error?
Also, what is childImageSharp? I'm wondering what the terminology is to define it. Is it a GraphQL "selector" or "function"?
It should be
query {
markdownRemark(fileRelativePath: { eq: "/content/pages/products.md" }) {
...TinaRemark
frontmatter {
title
products {
name
price
description
images {
url
}
}
}
html
}
}
Because you definition is
type ProductImage {
url: String
}
The url apparently has no sub fields.
For what it's worth (I don't know if this is related to your specific issue.) If your markdown path for the image file is invalid, GraphQL will return this error, interpreting the path as a string. I had this problem and it went away when I realized I had misspelled the path in the markdown.
productImage {
childImageSharp {
gatsbyImageData(width: 200)
}
}
I had a similar problem with returning a boolean. For me, instead of something like this
mutation {
someFunc(
memo: "test memo"
) {
success
}
}
I needed this
mutation {
someFunc(
memo: "test memo"
)
}

Gatsby graphql with regex as variable

I would like to use regex with graphql query variable.
This does't return results:
export const query = graphql`
query(
$episodes: String!
) {
episodes: allMarkdownRemark(
filter: { fields: { slug: { regex: $episodes } } }
) {
edges {
node {
id
}
}
}
}
`;
However, this would work:
export const query = graphql`
query() {
episodes: allMarkdownRemark(
filter: { fields: { slug: { regex: "/episodes/travel/" } } }
) {
edges {
node {
id
}
}
}
}
`;
what's wrong?
Passing regex via query arguments should work, see the screenshot below. Make sure you're passing in the regex as string, not the actual regex. Also, you'll need to escape the middle slash:
context: {
- episodes: /episodes\/traveller/ <-- doesn't work
+ episodes: /episodes\/traveller/.toString() <-- works
or episodes: "/episodes\\/traveller/" <-- also works
}
Try it out in one of the graphiQL embed in this page

Is it possible to use dynamic query alias names in GraphQL?

I am currently working on a Gatsby documentation site. One particular page retrieves the content of various README files for HTML/CSS components which are grouped into three different categories, based on regex searches of their local filepath structure. I'm using 3 separate aliased queries at the moment to retrieve very similar data and the DRY coder in me feels this should be possible with one and a $group-type variable (which would replace atoms, molecules and organisms in the below code) or something similar. As I'm a real newbie to GraphQL I'm not sure if this is possible and I can't seem to find anyone doing this online. Here's what I have so far:
export const pageQuery = graphql`
query($path: String!) {
pageData:
markdownRemark(fields: { slug: { eq: $path } }) {
html
fields {
slug
title
}
fileAbsolutePath
}
atoms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-atoms/"}}) {
edges {
node {
fields {
slug
title
}
}
}
}
molecules:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-molecules/"}}) {
edges {
node {
fields {
slug
title
}
}
}
}
organisms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-organisms/"}}) {
edges {
node {
fields {
slug
title
}
}
}
}
}
`;
You can define fragments to use in your queries. These allow you to define a selection set once and then use it just by referencing the name of the fragment. Do note that you have to know the name of the type for which you're specifying the selection set.
export const pageQuery = graphql`
query($path: String!) {
pageData:
markdownRemark(fields: { slug: { eq: $path } }) {
html
fields {
slug
title
}
fileAbsolutePath
}
atoms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-atoms/"}}) {
...MarkdownRemarkFields
}
molecules:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-molecules/"}}) {
...MarkdownRemarkFields
}
organisms:
allMarkdownRemark(sort: {order: ASC, fields: [fields___title]}, limit: 1000, filter: {fileAbsolutePath: {regex: "/dl-organisms/"}}) {
...MarkdownRemarkFields
}
}
fragment MarkdownRemarkFields on MarkdownRemarkConnection {
edges {
node {
fields {
slug
title
}
}
}
}
`;
Fragments are mentioned in the Gatsby docs here.

Resources