How to use a timeline ref with @prismicio/client library in Next.js/React

Question

I'm using the @prismicio/client library to fetch data from Prismic inside my Next.js app, but I can't figure out how to connect the preview mode and the preview ref it provides to the client.query call in order to fetch data for that specific timeline ref.

I tried looking for this in the technical reference for both the library itself and the guide on how to use Preview mode. They both mention I can use refs, but don't show an actual example. Here is my current set up, which is not working:

Inside my preview.ts page, I have this custom getServerSideProps function, which uses a custom call to my CMS handler where I pass the ref token:

export const getServerSideProps = async (context: NextPageContext): Promise<unknown> => {
    const lang = getLangFromContext(context);
    const { slug } = context.query as { slug: string[] };
    const { token, documentId } = context.query;

    if (!token) {
        return console.warn(`No token available, check your configuration`);
    }

    const { pageComponents, meta } = await getCmsPage(slug ? slug.join("/") : "", lang, token);
    return { props: { pageComponents, meta } };
};

When making the call to the Prismic API:

    const client = Prismic.client(refApiUrl, {
        accessToken: apiToken,
    });

    const res: any = await client.query(predicates, {
        key: refToken,
    });

This results in the server side error:

Error: Unknown field key
    at SearchForm.set (C:\main\Sprybase\projects\prismic-integration\dist\node_modules\@prismicio\client\cjs\@prismicio\client.js:200:19)
    at ResolvedApi.query (C:\main\Sprybase\projects\prismic-integration\dist\node_modules\@prismicio\client\cjs\@prismicio\client.js:606:25)
    at C:\main\Sprybase\projects\prismic-integration\dist\node_modules\@prismicio\client\cjs\@prismicio\client.js:1164:63
    at processTicksAndRejections (internal/process/task_queues.js:88:5)

What am I doing wrong? What is the correct way to pass a timeline ref to the Prismic client call?

score 0 · Answer 1 · answered Aug 09 '21 at 16:02

It seems in your application you're not using the getPreviewResolver function or a linkresolver which the toolbar uses to get the correct page and load the preview cookie on top of the browser.

Is there any reason why you're doing your preview in this way?

Thanks.

How to use a timeline ref with @prismicio/client library in Next.js/React

1 Answers1