Pass extra params from getStaticPaths to getStaticProps

[magicspon]

Evening...

I want to be able to build a pagination component that is statically generated for each paginated page...
i.e projects/, projects/1, ...etc

export async function getStaticPaths() {
	const data = await gqlClient().request(pagesQuery, {
		skip: null,
		first: null,
	})
	const postPerPage = 10
	const { projects } = data
	const { length } = projects

	const totalPages = Math.ceil(length / postPerPage)
	const paths = Array.from({ length: totalPages }).map((_, i) => ({
		params: {
			currentPage: `${i + 1}`,
			totalPages,
			postPerPage
		},
	}))

	return {
		paths,
		fallback: true,
	}
}

At the moment, only currentPage page from the params object is available in getStaticProps.

export async function getStaticProps({ params }) {
	const currentPage = params?.currentPage || 0
	const postPerPage = 10 // // ideally params.postPerPage

        // this request seems a bit wasteful, this data could be 
        // passed from getStaticPaths
	const data = await gqlClient().request(pagesQuery, {
		skip: currentPage * postPerPage,
		first: postPerPage,
	})

	return {
		props: {
			data,
                         currentPage,
                         totalPages: ?????
		},
	}
}

Without totalPages, and postPerPage I can't see how I can build a pagination component.
I could make the same request in getStaticProps, but this feels icky.

Cheers
Dave

[dasblitz]

I was looking for the same because the REST API I'm using, requires id's. E.g. /products/1 but I want to use the product slug in the url on the client so my page filename is [slug].js. So i'd like to return a slug and an id per path from getStaticPaths.

Going over the questions here it seems that the only solution right now is to make getStaticPaths store the values that you need in a .json file in and read from that file in getStaticProps

[davidbarratt]

I've been trying to do something similar. It would be helpful if getStaticPaths allowed for props alongside params. This would allow you to generate the props as a group rather than individually. Those props should also be passed to getStaticProps and the implementer will need to merge the object (if desired). In other words, the implementer shouldn't be forced to implement getStaticProps just to convert params to props.

[davidbarratt]

To be fair, this would only work if fallback is set to false, which I think is fine.

[davidbarratt]

I figured out a way to do this would be to run a script before next build is run that generates a JSON file that can then be imported in the lifecycle hooks. Feels a bit clunky, but it works.