Preview implementation with Gridsome

Developing with Prismic
1

Hi,

I've a project using stack Gridsome / Prismic. Here is prismic npm modules in package.json:

"@prismicio/client": "^4.0.0",
"@prismicio/vue": "^2.0.7",
"prismic-dom": "^2.2.4",
"prismic-javascript": "^3.0.2",

I've been using the Previews & the Prismic Toolbar GraphQL guide:

I've setup the preview environment on Prismic dashboard and implementing preview script, including /404.

I created a /preview route page on Gridsome project, which do the following on mounted lifecyle:

const apiEndpoint = 'https://my-repo-name.cdn.prismic.io/api/v2';
const previewClient = Prismic.client(apiEndpoint);
const { token, documentId } = this.$route.query;
// Retrieve the correct URL for the document being previewed.
// Once fetched, redirect to the given url
previewClient.getPreviewResolver(token, documentId)
  .resolve(linkResolver, '/')
  .then((url) => {
     // linkResolver retrieve the right URL for my article: `/blog/${formatedCategory}/${doc.uid}`
     this.$router.push(url);
   })

I've checked the io.prismic.preview, it seems to work using the Graphql browser. I can see my article's title changing on the graphql result.

Cookie: {%22_tracker%22:%22dyfJx3jW%22%2C%22comptalib-blog.prismic.io%22:{%22preview%22:%22https://comptalib-blog.prismic.io/previews/YMu7_xEAACEAgMlS:YMxZdhEAACMAg3ZF?websitePreviewId=YMNgTBEAACIAgWKz%22}}

Even though the cookie is well generated, I don't have my modification on website when I preview my article.

I think I'm missing something on the way it should works :thinking:

2

I may need to use the cookie toke to change the Prismic API queries using Prismic-ref. But I don't know how to do it.

In gridsome.server.js, I've the following query which I use to create page for each article:

const allArticlesQuery = await graphql(`
   {
       prismic {
          allArticles(sortBy: meta_firstPublicationDate_DESC) {
             edges {
                    node {
		      title
		      category
                      ...
                      ...
		  }
              }
           }
        }
      }
`);

Then, I create page for each node:

allArticlesQuery.data.prismic.allArticles.edges.forEach(({ node }) => {
   createPage({
	path: `/blog/${formatedCategory}/${node._meta.uid}/`,
	component: "./src/templates/Article.vue",
	context: {
	    category: node.category,
	    uid: node._meta.uid,
	    id: node._meta.id,
	}
    });
})

Do I have to set Prismic-ref on the createPage to have the right preview for my article ?

3

I don't find the way to add reference on my query :neutral_face:

Documentation

4. Use the correct reference

When you preview your website, a preview cookie is generated that contains the preview token. This token can be used as a valid ref to make Prismic API queries. For any query you make on your website, make sure to check for the Preview cookie and use this preview ref in the query options if the preview cookie exists.

How can I add ref from io.prismic.preview cookie to allArticlesQuery.

I tried something like this:

allArticles(sortBy: meta_firstPublicationDate_DESC, ref: ${previewRef}) { ... }

But I have the following error:
GraphQLError: Unknown argument "ref" on field "allArticles" of type "prismic".

5

Hi Quentin,

Welcome to the community!

Unfortunately, it's not possible to do previews with Gridsome at the minute.

The Gridsome ecosystem is not mature enough to implement previews properly yet.

Our Dev Exp recently discussed this on Twitter:

Thanks.

6

This thread has been closed due to inactivity. Flag to reopen.