Hello, Support Team~
As you can see from the above image, I fetch flag_page from "allPrismicTutorial" query.
But I can't see the flag_page param in the context of "allSitePage" query.
Already, I've set the flag_page in the gatsby-node.js file.
Do you know the reason for this?
Hey @max.petrivskyi
What kind of field is flag_page?
If this is a new field you've just added to the Tutorial Custom Type, you need to make sure you also update the schema in your project. The one you setup in the plugin configuration in gatsby-config.js
I'm not sure if the document data is available inside the allSitePage node. Usually, this is used to limit or sort the results in a query.
Why do you need to access the document's data from gatsby-node?
If you need to display that new field, after running gatsby clean, it should appear in your page queries.
Hi, @Pau
Thanks for your reply.
I solved this problem.
I've set the flag_page value for all relevant datas in prismic.
So it works now.
But I've encountered another problem, it is Gatsb Image Plugin
Here, I need to have dynamic images that coming from Prismic CMS.
According to the doc(gatsby-plugin-image | Gatsby)
getImage()function is an optional helper to make your code easier to read. It takes aFileand returnsfile.childImageSharp.gatsbyImageData, which can be passed to theGatsbyImagecomponent.
But I can't find *hildImageSharp.gatsbyImageData* this option my my graphql
Only see url there.
What is the problem?
Do you have the gatsby-plugin-sharp and gatsby-transformer-sharp plugins installed in your project?
These are required to handle locally transformed images
Hey!
What kind of fields are cover_image and thumbnail?
The gatsbyImageData node is only available for Image fields. So if those are something else, like Links to Media or something else, they're not going to have access to those values.
Could you share with us the full JSON schema for the Blog Post API Custom Type and your gatsby-config.js?
They are all Image fields.
// This is Blog Post API Custom Type
{
"Main": {
"title": {
"type": "Text",
"config": {
"label": "Title"
}
},
"slug": {
"type": "Text",
"config": {
"label": "slug"
}
},
"meta_title": {
"type": "Text",
"config": {
"label": "Meta Title"
}
},
"meta_description": {
"type": "Text",
"config": {
"label": "Meta Description"
}
},
"meta_keywords": {
"type": "Text",
"config": {
"label": "Meta Keywords"
}
},
"flag_page": {
"type": "Boolean",
"config": {
"placeholder_false": "include",
"placeholder_true": "exclude",
"default_value": false,
"label": "Flag Page"
}
},
"thumbnail": {
"type": "Image",
"config": {
"constraint": {},
"thumbnails": [],
"label": "Thumbnail"
}
},
"cover_image": {
"type": "Image",
"config": {
"constraint": {},
"thumbnails": [],
"label": "Cover Image"
}
},
"summary": {
"type": "Text",
"config": {
"label": "Summary"
}
},
"content": {
"type": "StructuredText",
"config": {
"multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl",
"label": "Content"
}
},
"category": {
"type": "Link",
"config": {
"select": "document",
"customtypes": ["blog_category"],
"label": "Category"
}
},
"featured": {
"type": "Boolean",
"config": {
"default_value": false,
"label": "Featured"
}
},
"trending": {
"type": "Boolean",
"config": {
"default_value": false,
"label": "Trending"
}
},
"date": {
"type": "Date",
"config": {
"label": "Date"
}
},
"banner": {
"type": "Boolean",
"config": {
"default_value": false,
"label": "Banner"
}
},
"homepage": {
"type": "Boolean",
"config": {
"default_value": false,
"label": "Homepage"
}
}
}
}
// gatsby-config.js
const path = require("path")
const linkResolver = require("./src/utils/linkResovler")
const siteUrl = `https://altrady.netlify.app/`
module.exports = {
/* Your site config here */
siteMetadata: {
title: `Trade Bitcoin`,
description: `Trade Bitcoin, Altcoins and Etherum with Altrady - All-In-One Multi-Exchange Cryptocurrency Trading Platform.Crypto Community Help. Crypto Trading Software Made Fast and Simple!`,
keywords: `altrady, bitcoin, website, crypto, trading, cryptocurrency, exchange, platform`,
siteUrl: siteUrl,
},
plugins: [
`gatsby-plugin-sass`,
`gatsby-plugin-react-helmet`,
{
resolve: "gatsby-source-prismic",
options: {
repositoryName: "altrady",
lang: "*",
schemas: {
exchanges: require("./custom_types/exchanges.json"),
features: require("./custom_types/features.json"),
partners: require("./custom_types/partners.json"),
blogPost: require("./custom_types/blog_post.json"),
blogCategory: require("./custom_types/blog_category.json"),
courseCategory: require("./custom_types/course_category.json"),
tutorial: require("./custom_types/tutorial.json"),
roadmap: require("./custom_types/roadmap.json"),
},
linkResolver: () => doc => linkResolver(doc),
},
},
{
resolve: "gatsby-plugin-sitemap",
options: {
query: `
{
allPrismicBlogPostApi {
nodes {
data {
slug
}
last_publication_date
}
}
allSitePage {
nodes {
path
context {
blogDetail {
data {
slug
flag_page
}
}
exchange {
data {
flag_page
}
}
course {
data {
flag_page
}
}
feature {
data {
flag_page
}
}
tutorial {
data {
flag_page
}
}
}
}
}
}
`,
output: `/`,
resolveSiteUrl: () => siteUrl,
resolvePages: ({
allPrismicBlogPostApi: { nodes: allBlogs },
allSitePage: { nodes: allPages },
}) => {
return allPages
.filter(
page =>
(page.context &&
page.context.blogDetail &&
page.context.blogDetail.data.flag_page !== true) ||
(page.context &&
page.context.exchange &&
page.context.exchange.data.flag_page !== true) ||
(page.context &&
page.context.feature &&
page.context.feature.data.flag_page !== true) ||
(page.context &&
page.context.course &&
page.context.course.data.flag_page !== true) ||
(page.context &&
page.context.tutorial &&
page.context.tutorial.data.flag_page !== true)
)
.map(page => {
let blog = allBlogs.filter(item => {
return page.path === "/blog/" + item.data.slug
})
if (blog.length > 0) return { ...page, ...blog[0] }
else
return {
...page,
last_publication_date: new Date(),
}
})
},
serialize: ({ path, last_publication_date }) => {
return {
url: path,
lastmod: last_publication_date,
}
},
},
},
{
resolve: "gatsby-plugin-google-tagmanager",
options: {
id: "GTM-N6R3CC2",
includeInDevelopment: false,
defaultDataLayer: { platform: "gatsby" },
enableWebVitalsTracking: true,
},
},
{
resolve: "gatsby-plugin-robots-txt",
options: {
host: "https://altrady.netlify.app/",
sitemap: "https://altrady.netlify.app/sitemap-0.xml",
policy: [{ userAgent: "*", allow: "/" }],
},
},
{
resolve: `gatsby-plugin-resolve-src`,
oprions: {
src: path.resolve(__dirname, "src"),
utils: path.resolve(__dirname, "utils"),
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Altrady",
short_name: "Altrady",
start_url: "/",
background_color: "#f7f0eb",
theme_color: "#a2466c",
display: "standalone",
icon: "src/assets/imgs/favicon.svg",
},
},
{
resolve: `gatsby-plugin-canonical-urls`,
options: {
siteUrl: `https://altrady.netlify.app/`,
stripQueryString: true,
},
},
{
resolve: `gatsby-plugin-sharp`,
options: {
defaults: {
formats: [`auto`, `webp`],
placeholder: `blurred`,
quality: 70,
breakpoints: [480, 750, 1080, 1366, 1920],
backgroundColor: `transparent`,
tracedSVGOptions: {},
blurredOptions: {},
jpgOptions: {},
pngOptions: {},
webpOptions: {},
avifOptions: {},
},
},
},
`gatsby-plugin-image`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blogs`,
path: `${__dirname}/src/assets/imgs`,
},
},
],
}
Is there any solution to solve this problem?
Are you getting any errors for the schema definitions? I'm wondering because they need to be declared with the name needs to be the same as the API ID in the plugin configuration.
{
resolve: 'gatsby-source-prismic',
options: {
repositoryName: 'altrady',
lang: '*',
schemas: {
exchanges: require('./custom_types/exchanges.json'),
features: require('./custom_types/features.json'),
partners: require('./custom_types/partners.json'),
blog_post: require('./custom_types/blog_post.json'),
blog_category: require('./custom_types/blog_category.json'),
course_category: require('./custom_types/course_category.json'),
tutorial: require('./custom_types/tutorial.json'),
roadmap: require('./custom_types/roadmap.json'),
},
linkResolver: (doc) => linkResolver(doc),
},
},
Have you updated your source plugin to the latest version v4?
I've updated the source plugin to the latest version v4,
but get above error,
I am not sure what is the problem.
At first glance, I'm not sure what the problem might be. Would you be able to give me access to your project code to take a closer look?
You can send me the details via dm. And the instructions to run the project
@max.petrivskyi The new error you are seeing in the console is saying you need to provide a JSON schema for the following Custom Types:
blog_categoryblog_post_apicourse_categoryYou are providing these in your gatsby-config.js, but under the wrong name. Can you change the keys in gatsby-config.js to the following?
blogCategory => blog_category
blogPostApi => blog_post_api
courseCategory => course_category
@Pau posted an example config in the previous post.
Thanks!