Skip to content

Instantly share code, notes, and snippets.

@Mozart409
Created December 14, 2020 11:18
Show Gist options
  • Save Mozart409/a50489556900fcec058a4a15d8605b56 to your computer and use it in GitHub Desktop.
Save Mozart409/a50489556900fcec058a4a15d8605b56 to your computer and use it in GitHub Desktop.
Next.js getStaticPaths Multiple Params
import { request, gql } from 'graphql-request'
import { PageHeading, Spacer } from '@components'
// gql query for getStaticPaths
const PageSlugsQuery = gql`
query PageBySlug {
pages {
slug
id
}
}
`
// gql query for getStaticProps
const PageById = gql`
query PageById($id: ID!) {
page(id: $id, publicationState: LIVE) {
id
slug
title
dz {
__typename
... on ComponentUiRichTextImage {
id
richtext
image_right
image {
id
url
alternativeText
previewUrl
provider
provider_metadata
size
hash
}
}
... on ComponentUiCta {
id
title
richtext
button {
id
text
size
border
link
}
}
... on ComponentUiQuestionsAnswers {
id
question
anwser
}
}
}
}
`
const Page = ({ data }) => {
return (
<div>
{console.log(data)} //works with hardcoded ID e.g. 3
<PageHeading title={data.title} />
</div>
)
}
export async function getStaticPaths() {
const allPages = await request(
`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/graphql`,
PageSlugsQuery //See top for query
)
return {
paths: allPages?.pages.map((page) => ({
params: {
slug: page.slug, // Slug to create page path. Page is correctly built, so localhost:3000/example/ works, just no data
id: page.id, // Is not beding returned
},
})),
fallback: true,
}
}
export async function getStaticProps({ params }) {
console.log('Params ID ' + params.id) // undefinded come backs
console.log(params) // { slug: 'example-page' }
/* const response = await request(
`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/graphql`,
PageById,
{ id: params.id } // ID is need to query the data
)
const data = response.page
return {
props: { data },
} */
return {
props: {},
}
}
export default Page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment