useGetStaticProps to get additional Content Relation field data?

[asummers (Ashley Summers)]

I have a document type that has a group of content relationship fields called related_articles. I'm using the Slice Machine setup with useGetStaticProps, which looks like this:

export const getStaticProps = useGetStaticProps({
  client: Client(),
  queryType: 'repeat',
  type: 'article',
  apiParams({ params }) {
    return {
      uid: params.uid
    }
  }
});

Is it possible to request additional fields from the content relationship fields in the group of the document? I'd like to be able to get the page title in addition to the slug, etc. I tried passing in fetchLinks to the apiParams object, but wasn't successful. To be clear, the group is on the document itself, not within a slice.

Update: I ended up just doing it with getStaticProps and adding in fetchLinks, but if there's a cleaner way to do this using the useGetStaticProps hook, that would be awesome.

[samlittlefair]

Hi @asummers ,

This should work by passing your fetchLinks option to the apiParams. Can you show me what your function looked like with fetchLinks, and tell me what your repo name is? (You can send the repo name in a DM if you don't want to share it publicly.)

Thanks,
Sam

[asummers (Ashley Summers)]

Hi, Sam.

Thanks for the reply - it looked like this:

export const getStaticProps = useGetStaticProps({
  client: Client(),
  queryType: 'repeat',
  type: 'article',
  apiParams({ params }) {
    return {
      uid: params.uid,
      fetchLinks: params.fetchLinks,
    }
  }
});

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  type: 'article',
  formatPath: (prismicDocument) => {
    return {
      params: {
        uid: prismicDocument.uid,
        fetchLinks: 'article.title'
      }
    }
  },
});

Would be really cool if it worked - I'm fairly new to Next and Prismic, so I may just be passing it incorrectly.

[samlittlefair]

Hey @asummers,

I think the issue is that you're setting your fetchLinks in getStaticPaths and then passing it to getStaticProps. I tried that syntax, and it didn't work. Try specifying fetchLinks directly in getStaticProps:

export const getStaticProps = useGetStaticProps({
  client: Client(),
  queryType: 'repeat',
  type: 'article',
  apiParams({ params }) {
    return {
      uid: params.uid,
      fetchLinks: 'article.title'
    }
  }
});

And in case there are still any errors, here's the exact code I used:

export const getStaticProps = useGetStaticProps({
  client: Client(),
  apiParams({ params }) {
    return {
      uid: params.uid,
      fetchLinks: "page.title",
    };
  },
});

export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument) => {
    return {
      params: {
        uid: prismicDocument.uid,
      },
    };
  },
});

Let me know if that works! If not, I can keep trying to debug.

Best,
Sam