Fetching multiple api with next.js getStaticProps hook

juskeviciusarn · January 5, 2021, 9:58am

Hello, everyone

I'm struggling to think a way to fetch multiple api with useGetStaticProps method.

My use case I use slicemachine to render content which is set in prismic. Some content for slice is dynamic which sits in API.

So my question is how can I prefetch data from 2 apis(Prismic and My Custom Api) to get all data for slice.

I was looking into integration fields feature, but it seems a slicemachine doesn't support it.

One of ways I think that maybe splitting useGetStaticProps to smaller parts, that I could build it myself with extra return props.

Big thanks in advance.

Phil · January 8, 2021, 1:37pm

HI Arnas,

Sorry about the delay, I needed to get some info from the team about how to do this.

So in this case, you shouldn't use useGetStaticProps method, instead query the client with Next.js getStaticProps. Then you can re-use the next-slicezone/features/query. You can see below how to do this:

github.com

prismicio/slice-machine/blob/master/packages/next-slicezone/hooks/useGetStaticProps.js#L26


  preview = null,
  previewData = {},
  params = {}
}) {
  const registry = await createRegistry()
  const { ref = null } = previewData
  const resolvedUid = typeof uid === 'function' ? uid({ params, previewData, preview }) : (uid || null)
  try {
    const doc = await query({
      queryType,
      apiParams: Object.assign({ ref }, apiParams),
      type,
      uid: resolvedUid,
      client,
    })
    return {
      props: {
        ...doc,
        error: null,

Let us know if you have any further questions.

juskeviciusarn · January 8, 2021, 12:03pm

Hello, Phil,

It works like a charm.

thank you for help

system · January 9, 2021, 12:03pm

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.