troias
commented
2 years ago Closed troias closed 2 years ago
troias
commented
2 years ago troias
commented
2 years ago I figured it out - in the graphql query in utils.api - the author makes a fragment that makes a return template for uploadFileEntityResponse ( so can not return an array of images/nested resources/components). Fix is to make another fragment that does just above his and use it on multi_images/ return collections from graphal. On ComponentSectionsFeatureProductGroup I use the new fragment CollectionParts instead of file parts.
fragment CollectionParts on UploadFileRelationResponseCollection { data { id attributes { alternativeText width height mime url formats } } }
fragment FileParts on UploadFileEntityResponse { data { id attributes { alternativeText width height mime url formats } } }
query GetPages(
$slug: String!
$publicationState: PublicationState!
$locale: I18NLocaleCode!
) {
pages(
filters: { slug: { eq: $slug } }
publicationState: $publicationState
locale: $locale
) {
data {
id
attributes {
locale
localizations {
data {
id
attributes {
locale
}
}
}
slug
metadata {
metaTitle
metaDescription
shareImage {
...FileParts
}
twitterCardType
twitterUsername
}
contentSections {
__typename
... on ComponentSectionsBottomActions {
id
title
buttons {
id
newTab
text
type
url
}
}
... on ComponentSectionsAuthContentGroup {
id
authForm {
title
}
}
... on ComponentSectionsFeaturedLocationGroup {
id
mainTitle
locations {
id
address
name
phone
email
website
openingHours
date
description
picture {
...FileParts
}
}
}
... on ComponentSectionsFeatureProductGroup {
id
mainTitle
product {
id
productImage {
...FileParts
}
productCard {
id
productTitle
productContent
test {
...CollectionParts
}
}
productSizeOption {
id
size
price
}
}
}
... on ComponentSectionsCareerContentGroup {
id
bannerImage {
...FileParts
}
mainTitle
lowerTitle
aboutUs
image {
...FileParts
}
image1 {
...FileParts
}
title
lowerImg {
...FileParts
}
lowerImg1 {
...FileParts
}
lowerImg2 {
...FileParts
}
vaccanciesTitle
vacanciesContent
applyNowButton {
id
text
type
}
}
... on ComponentSectionsHero {
id
buttons {
id
newTab
text
type
url
}
title
description
label
picture {
...FileParts
}
}
... on ComponentSectionsFeatureColumnsGroup {
id
features {
id
description
icon {
...FileParts
}
title
}
}
... on ComponentSectionsFeatureRowsGroup {
id
features {
id
description
link {
id
newTab
text
url
}
media {
...FileParts
}
title
}
}
... on ComponentSectionsTestimonialsGroup {
id
description
link {
id
newTab
text
url
}
logos {
id
title
logo {
...FileParts
}
}
testimonials {
id
logo {
...FileParts
}
picture {
...FileParts
}
text
authorName
authorTitle
link
}
title
}
... on ComponentSectionsLargeVideo {
id
description
title
poster {
...FileParts
}
video {
...FileParts
}
}
... on ComponentSectionsRichText {
id
content
}
... on ComponentSectionsPricing {
id
title
plans {
description
features {
id
name
}
id
isRecommended
name
price
pricePeriod
}
}
... on ComponentSectionsLeadForm {
id
emailPlaceholder
location
submitButton {
id
text
type
}
title
}
... on ComponentSectionsEmailContactForm {
id
title
emailPlaceholder
emailTitle
mobilePlaceholder
mobileTitle
name
namePlaceholder
nameTitle
messageTitle
messagePlaceholder
submitButton {
id
text
type
}
}
}
}
}
}
} import qs from "qs"
export function getStrapiURL(path) {
return ${process.env.NEXT_PUBLIC_STRAPI_API_URL || 'http://localhost:1337' }${path}
}
/**
@returns Parsed API call response */ export async function fetchAPI(path, urlParamsObject = {}, options = {}) { // Merge default and user options const mergedOptions = { headers: { "Content-Type": "application/json",
}, ...options, }
// Build request URL
const queryString = qs.stringify(urlParamsObject)
const requestUrl = ${getStrapiURL( /api${path}${queryString ? ?${queryString} : ""} )}
console.log("requestUrl", requestUrl)
console.log("queryString", queryString)
console.log("mergedOptions", mergedOptions)
// Trigger API call
const response = await fetch(requestUrl, mergedOptions)
console.log("response", response)
// Handle response
if (!response.ok) {
// console.error(response.statusText)
throw new Error(An error occured please try again)
}
const data = await response.json()
// console.log("data", data)
return data
}
/*
@param {boolean} options.preview router isPreview value */ export async function getPageData({ slug, locale, preview }) { // Find the pages that match this slug const gqlEndpoint = getStrapiURL("/graphql") console.log("slug", slug) console.log("locale", locale) console.log("gqlEndpoint", gqlEndpoint) const pagesRes = await fetch(gqlEndpoint, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query: ` fragment CollectionParts on UploadFileRelationResponseCollection { data { id attributes { alternativeText width height mime url formats } } } fragment FileParts on UploadFileEntityResponse { data { id attributes { alternativeText width height mime url formats } } }
query GetPages(
$slug: String!
$publicationState: PublicationState!
$locale: I18NLocaleCode!
) {
pages(
filters: { slug: { eq: $slug } }
publicationState: $publicationState
locale: $locale
) {
data {
id
attributes {
locale
localizations {
data {
id
attributes {
locale
}
}
}
slug
metadata {
metaTitle
metaDescription
shareImage {
...FileParts
}
twitterCardType
twitterUsername
}
contentSections {
__typename
... on ComponentSectionsBottomActions {
id
title
buttons {
id
newTab
text
type
url
}
}
... on ComponentSectionsAuthContentGroup {
id
authForm {
title
}
}
... on ComponentSectionsFeaturedLocationGroup {
id
mainTitle
locations {
id
address
name
phone
email
website
openingHours
date
description
picture {
...FileParts
}
}
}
... on ComponentSectionsFeatureProductGroup {
id
mainTitle
product {
id
productImage {
...FileParts
}
productCard {
id
productTitle
productContent
test {
...CollectionParts
}
}
productSizeOption {
id
size
price
}
}
}
... on ComponentSectionsCareerContentGroup {
id
bannerImage {
...FileParts
}
mainTitle
lowerTitle
aboutUs
image {
...FileParts
}
image1 {
...FileParts
}
title
lowerImg {
...FileParts
}
lowerImg1 {
...FileParts
}
lowerImg2 {
...FileParts
}
vaccanciesTitle
vacanciesContent
applyNowButton {
id
text
type
}
}
... on ComponentSectionsHero {
id
buttons {
id
newTab
text
type
url
}
title
description
label
picture {
...FileParts
}
}
... on ComponentSectionsFeatureColumnsGroup {
id
features {
id
description
icon {
...FileParts
}
title
}
}
... on ComponentSectionsFeatureRowsGroup {
id
features {
id
description
link {
id
newTab
text
url
}
media {
...FileParts
}
title
}
}
... on ComponentSectionsTestimonialsGroup {
id
description
link {
id
newTab
text
url
}
logos {
id
title
logo {
...FileParts
}
}
testimonials {
id
logo {
...FileParts
}
picture {
...FileParts
}
text
authorName
authorTitle
link
}
title
}
... on ComponentSectionsLargeVideo {
id
description
title
poster {
...FileParts
}
video {
...FileParts
}
}
... on ComponentSectionsRichText {
id
content
}
... on ComponentSectionsPricing {
id
title
plans {
description
features {
id
name
}
id
isRecommended
name
price
pricePeriod
}
}
... on ComponentSectionsLeadForm {
id
emailPlaceholder
location
submitButton {
id
text
type
}
title
}
... on ComponentSectionsEmailContactForm {
id
title
emailPlaceholder
emailTitle
mobilePlaceholder
mobileTitle
name
namePlaceholder
nameTitle
messageTitle
messagePlaceholder
submitButton {
id
text
type
}
}
}
}
}
}
} `, variables: { slug, publicationState: preview ? "PREVIEW" : "LIVE", locale, }, }), })
const pagesData = await pagesRes.json() // Make sure we found something, otherwise return null if (pagesData.data?.pages == null || pagesData.data.pages.length === 0) { return null }
// Return the first item since there should only be one result per slug return pagesData.data.pages.data[0] }
// Get site data from Strapi (metadata, navbar, footer...)
export async function getGlobalData(locale) {
const gqlEndpoint = getStrapiURL("/graphql")
const globalRes = await fetch(gqlEndpoint, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
query: fragment FileParts on UploadFileEntityResponse { data { id attributes { alternativeText width height mime url formats } } } query GetGlobal($locale: I18NLocaleCode!) { global(locale: $locale) { data { id attributes { favicon { ...FileParts } metadata { metaTitle metaDescription shareImage { ...FileParts } twitterCardType twitterUsername } metaTitleSuffix notificationBanner { type text } navbar { logo { ...FileParts } links { id url newTab text } button { id url newTab text type } authLink { id url newTab text type } } footer { logo { ...FileParts } smallText columns { id title links { id url newTab text } } } } } } } ,
variables: {
locale,
},
}),
})
const global = await globalRes.json() return global.data.global }
troias
commented
2 years ago Need to fetch non single entity resonse from graphql