Using Inline Editing alongside the Sidebar in NextJS with Strapi

So I’ve built a site using Tina and Gatsby and to get the inline editing working alongside the form fields in the sidebar I used useLocalMdxForm

const [data, form] = useLocalMdxForm(post, PostForm)

Now I’ve decided to scrap that because we don’t want to be running gatsby develop in production. So I’m following along with the NextJS & Strapi Guide, I want to know how I can get the sidebar and the inline editing both working here. To have the sidebar editable as well as the page itself - so that users can see which fields are editable.

With the code below the form fields are appearing in the sidebar but they are empty – I think I need useLocalForm but that’s gone now. Unsure what to pass in as the watchedValues

export default function Post({ post: initialPost, preview }) {
    const cms = useCMS()
    const formConfig = {
        id: initialPost.id,
        label: 'Blog Post',
        initialValues: initialPost,
        onSubmit: async (values) => {
            const saveMutation = `
                mutation UpdateBlogPost(
                    $id: ID!
                    $title: String
                    $content: String
                    $coverImageId: ID
                ) {
                    updateBlogPost(
                    input: {
                        where: { id: $id }
                        data: { title: $title, content: $content, coverImage: $coverImageId}
                    }
                        ) {
                        blogPost {
                            id
                        }
                    }
                }`
            const response = await cms.api.strapi.fetchGraphql(saveMutation, {
                id: values.id,
                title: values.title,
                content: values.content,
                coverImageId: cms.media.store.getFileId(values.coverImage.url)
            })
            if (response.data) {
                cms.alerts.success('Changes Saved')
            } else {
                cms.alerts.error('Error saving changes')
            }
        },
        fields: [
            {
                // What goes here?
                name: initialPost.title,
                component: 'text',
                label: 'Title',
                description: 'Post title'
            }
        ]
    }
  
    const [post, form] = useForm(formConfig) // <-- something needs to change here!

I would think that this would be a common use case - I see it’s been removed on the main site so you only have the inline editing. Which is really nice, however I think users would want to see the sidebar with an indication of all that is editable, as not everything on the page might be an inline field.

It might just be me but I find the documentation for the sidebar forms confusing. The inline form documentation is really good though!

Hope this makes sense, would be really grateful for your help.

1 Like

Hello!

To reduce the complexity of our API, we deprecated useLocalForm and useGlobalForm, but the functionality of those has not been removed.

Instead of useLocalForm, you can just call useForm (as you have) and then plug it into the sidebar with usePlugin.

import { useForm, usePlugin } from 'tinacms'

//...
const [post, form] = useForm(formConfig)
usePlugin(form)

If you’re already seeing the form in the sidebar, I’m guessing you’ve already done this!

Based on your code example, the issue with your field appears to be what you’re passing into the name parameter. Try just passing a string for the name. This string will be the key that you use to access the value from the values object in your onSubmit, as well as the key in initialValues that the data is initially populated from.

        fields: [
            {
                // What goes here?
                name: 'title',
                component: 'text',
                label: 'Title',
                description: 'Post title'
            }
        ]
1 Like

Ahh! Fab. Got it now. Thanks DJ

1 Like