Edit Button not appearing on Static Next.js

Developing with Prismic
10

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.

1 Like