Linking to Content Relationship fields

Developing with Prismic
1

Hi, I need a little bit of assistance figuring out how I can display my Content relationship field content.

    const [doc, setData] = useState(null);
    useEffect(() => {
        const fetchData = async () => {
            const response = await Client.query(
                Prismic.Predicates.at('document.type', 'hero_panel'),
                Prismic.Predicates.at(
                    'data.body.primary.hero_link.id',
                    'YHBfMREAACIAFeyw'
                )
            ).then((res) => {
                setData(res.results[0]);
            });
            // console.log(doc);
            return response;
        };
        fetchData();
    }, [doc]);

    const Panel = () => {
        return (
            <div>
                <h1>Content</h1>
                {/* <h1>{doc.data.panel_title}</h1> */}
                {/* <h2>{doc.data.body[0].primary.basic_text}</h2> */}
                {/* <img alt='random' src={doc.data.hero__full_size.url} /> */}
            </div>
        );
    };

    return <Fragment>{doc ? <Panel /> : <div>No content</div>}</Fragment>;
};

I have a repeatable content type called 'hero_panels' and I have various fields such as images etc...

I have a singular content type called 'hero_panel' and in there I have a field called 'hero_link' that I want to inject my 'hero_panels', but I just can't seem to figure it out. I also seem to be getting this error:

Could not get the stack frames of error: TypeError: Cannot read property 'length' of null

Any help would be appreciated.

3

Hello @nick.toye

Welcome to the Prismic Forum.

After looking at your Prismic predicates query, I found that It needs some refactoring. This query should be like that:

const response = await Client.query([
  Prismic.Predicates.at('document.type', 'hero_panel'),
    Prismic.Predicates.at('my.hero_panel.hero_link', 'YHBfMREAACIAFeyw')
])

You need to follow this documentation.

Let me know if you have further questions.

Thanks,

Priyanka

4

Ah, I thought I tried that. Well that seems to work now, or at least I get less errors.

5

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