Edit Button not appearing on Static Next.js

Hey,

So I can now close the preview toolbar which is great! Thanks for getting that fixed.

I'm still unable to use the edit mode button however. Is there something that needs to be enabled on my account? I noticed the preview script in my account is still the old version.

Please let me know of any way to help me debug if what I'm doing is wrong.

The toolbar state URL https://andru.prismic.io/toolbar/state resolves with data, but no button still.

I have the data-wio-id attribute on the article container with the document ID but that doesn't seem to help.

The toolbar predict URL resolves to an empty document array if that's helpful. I would have assumed it should include my document ID of the page in it. Not least the one I've passed in the data attribute on the article ID.

Hope you can help steer me in the right direction!

Hey Andru, can you try and check again and see if it works now, probably you'll need to do clear your cache and reload, but it should be good. Also, you should now see the new script in your repo. For this version, you can delete the data-wio-id attributes altogether.

Hi Paulina

Can now see the new script in my Prismic repo thanks.

Have updated, cleared cache and removed the attributes but I don't get anything rendering inside the Toolbar iframe.

I've deployed the built app to Vercel, where hopefully you can see something I'm missing?

Happy to setup a codesandbox if you need to see any specific implementation but I am using this Next.js template to evaluate Prismic, and have only added the preview script inside the <Head> in _document.js

Hope you can help! Sorry if it's just me being stupid.

So have managed to get the edit button to work on a purely client side react app, after forking this prismic template.

The next.js app I'm using uses getStaticProps. I'm going to try out the SSR methods next uses but would be good to know if this might be a limitation of the edit button? For example, does the Prismic API call need to be made client-side for the toolbar to magically know the document ID?

The next.js template also uses GraphQL, maybe that also is an issue for the edit button? Would hope not, but be good to know how the toolbar does find the correct document IDs.

Feel free to push me to the code or docs, if you'd rather not spend time explaining. I noticed the links to the edit button docs no longer work in the documentation site, maybe these are being worked on atm?

Hope you can help!

Hi Andru,

Sorry these replies were getting lost in the private message I'm going to make this topic public so we can figure it out.

This issue is really weird as we have tested with Next.js in both SSR and Static mode before and the button worked fine. What's stranger is that previously you showed that the preview module was present but not the edit button, even though they are technically both the same thing. This is making me think this might be something as simple as a css conflict.

The edit button and previews get their data from cookies coming from the Prismic Dashboard and the toolbar does a small api call, ?predict, to check what is the main document. This is all done with and iframe which is loaded on top of your project for logged in Prismic users.

You're correct that the edit button links in the documentation were broken, we've removed them now as these were outdated, since the preview script add's the button automatically and having these docs is confusing.

Can you send me your project in a zip file or give me a link to the github repo so I can investigate this?

It is strange, because the preview still works.

But the edit button just never renders. It's not a CSS issue unfortunately.

The ?predict request always just returns an empty array.

I've added the demo repo to github + made a codesandbox from it if its helpful.

Let me know if there's anything I can do to help!

Thanks, I'm looking in to it.

Awesome thanks!

I was a little hasty on my setup, but seems codesandbox doesn't support SSG, so here it is on Vercel.

That being said, unlike on localhost, the toolbar state/predict/devMode requests don't seem to happen on the Vercel URL. I wondered if that was because that domain wasn't added in the preview settings — but I've just added the Vercel domain now, but its still not making the requests there yet. Maybe it takes a little time :man_shrugging:t2:

Anyhow, hope that may help too!

Hi Andru,

I'm really genuinely sorry about not getting back to you. I got caught up in a lot of other things, but I got some help form my team and I think I know what's going on.

I believe the issue is coming from the fact that your website is using SSG. The toolbar needs to see a query happen to know which documents are used on the page. But with a static site, that happens at build time, so the toolbar doesn’t know what’s being used on the page.

We will work on improving the how the toolbar interacts with SSG sites in the future, but for now we have a workaround that my team member has used. So you will need to run a query for the documents on your page on the client-side after the page has loaded. You can use the fetch option to limit the results and speed up the queries.

You don’t do anything with those returned documents, it’s just so that the toolbar will see a query and show those documents for the edit list.

This was what my colleague did when building our new docs website with Next.js, he created the functions that would query the current page with client-side with useEffect & fetched only the display name to make the query faster:

useUpdateToolbarDocs:

import { useEffect } from 'react'

const useUpdateToolbarDocs = (docQuery, deps) => {
  useEffect(() => {
    docQuery()
  }, deps)
}

export default useUpdateToolbarDocs

articleToolbarDocs

export const articleToolbarDocs = (uid, ref = null) => (async () => {
  const articleDocsPromise = getArticleDocs(uid, ref)
  const layoutPromise = getLayout(ref, { fetch: 'layout.prismic_display_name' })
  const prismicDocs = await Promise.all([articleDocsPromise, layoutPromise])

  const [{ article, sideNavigation }, layout] = prismicDocs

  return {
    article,
    sideNavigation,
    layout,
  }
})

On the page he called the above functions:

useUpdateToolbarDocs(articleToolbarDocs(article.uid, preview.activeRef), [article])

This then triggers the edit button.

Like I said this is only a workaround and hopefully we can better support SSG soon.

Thanks.

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