GraphQL NEXT.js Previews

Developing with Prismic
1

Hey,

I've been trying to get Previews working with GraphQl and Next js. I have recently upgraded to the latest Prismic versions (client v6, helpers v2, prismic/next, slice machine) but I can't see documentation on how to link the new client with apollo.

I was previously using the prismic apollo link library which I have updated and somewhat works but there are issues with the content not updating when it should - the first preview may work but the following previews don't update. I am querying using the apollo link client and sending the preview ref as a header. I had similar problems before upgrading prismic as the previews were not working properly then too.

I have also tried setting up my prismic io file like so and have the same problem with it only updating some of the time.


export function linkResolver(doc) {
    switch (doc.type) {
        case 'homepage':
            return '/';
        case 'airline':
            return `/airlines/prismic/${doc.uid}`;
        case 'blog_post':
            return `/blog/${doc.uid}`;
        case 'blog':
            return `/blog`;

        default:
            return null;
    }
}

export function createClient(config = {}) {
    const client = prismic.createClient(endpoint, { accessToken: apiAccessToken, ...config });

    enableAutoPreviews({
        client,
        previewData: config?.previewData,
        req: config?.req,
    });

    return client;
}


const client = createClient();

export const apolloClient = new ApolloClient({
    link: new HttpLink({
        uri: prismic.getGraphQLEndpoint(repositoryName),
        fetch: client.graphqlFetch,
        useGETForQueries: true,
    }),
    cache: new InMemoryCache(),
});

Any help with this would be greatly appreciated.

Thanks,

Aaron

3

Hi @awestguard
Have you tied to disable the InMemoryCache? and have you tried to use this library instead?

5

@awestguard here's an example of how Prismic connects with @apollo/client:

Then, to set up previews you can follow the guide for Next:

In this document, you'll see that you'll need to install certain dependencies to enable previews, such as PrismicPreview from @prismicio/next.