Issue with SSR Hooks in Slices

Developing with Prismic
,
1

Hi Prismic Community,

Since I've been working with slices I've found out that one of the 'struggles' is getting relational data inside a slice. Since the 'content relation' field can have more than 1 'custom type' its hard to define ALL the fields in there to load extra. So what i've done is sending the whole data to a new component and use a prismic hook to get the data. (Quite inefficient if you have to say so)

Though, because of this I'm getting the following error:

 Error: Invariant failed: A @prismicio/client is required to query documents. Provide a client to the hook or to a <PrismicProvider> higher in your 
component tree.

I've got a PrismicProvider in the app.tsx. I've installed the whole repo fresh with slicemachine. Can't find the credentials it logged in with (Where they are stored or something).

The code I've got right now:

import {usePrismicDocumentByUID} from "@prismicio/react";
import * as prismicT from "@prismicio/types";

const TeamMember = ({data, variant}: {data: prismicT.RelationField, variant?: string}) => {
    const [page] = usePrismicDocumentByUID(data.type, data.uid);

    return (
        <div className={style.wrapper}>
            <h2>{page.name}</h2>
        </div>
    );
}

export default TeamMember;

I've got 2 questions;

  1. How can I get the SSR Hook to work?
  2. Is there another solution so I dont have to actually use the ssr hook at all and can load the data via a * mark somewhere?

Thanks in advance!

3

Hello @sanne.v1stra

Thanks for reaching out to us.

It's difficult for me to answer without having complete source code. Can you share more details?

Thanks,
Priyanka

4

Hi @Priyanka,

I've done some recoding and the SSR hooks are working as they should be.
Sorry for the late update. (Havent been able to touch code for a few days)

5

Thanks, @sanne.v1stra, for the update. Feel free to reach out to us if you have any questions.