Working with Inline Blocks into Gatsby

Hey guys,

I just followed the ‘Working with Inline Blocks’ tutorial using Gatsby instead of create-react-app. All works great except I can’t work out any possible strategy for getting data changes to save to JSON.

Could anyone possibly help? I’ve attempted and failed to integrate with gatsby-plugin-tinacms and the JSON plugins

Here is my working repo (100% of code from tutorial has been crammed into /src/pages/index.js)

Thanks in advance and great work with the updates TinaCMS team!

Hey @matthewthomson instead of calling useForm directly you can call useJsonForm from the gatsby-tinacms-json package.

Thanks @ncphi

I’ve got useJsonForm taking gatsby-plugin-tinacms data via useStaticQuery

It doesn’t error but it doesn’t populate the blocks and it freezes. - repo if you’re interested (sorry about the messy single file)

Almost! useJsonForm actually takes the jsonNode as the first argument:

const [pageData, form] = useJsonForm(data.dataJson)

I don’t think you’ll need to pass the formConfig at all

Thanks again @ncphi much appreciated

I’ve added and commited your recommended change and no errors. However the inline block edits don’t write to the data.json file on save. Any ideas? I can only manage to set the inital values with:

const formConfig = {
  initialValues: data.dataJson,
const [pageData, form] = useJsonForm(data.dataJson, formConfig)

Ps. I’m keen to make perhaps a Tailwind starter once this is working. I believe Tina inline + Gatsby Cloud will one day help us developers compete with Wix.

The path to your blocks data should be rawJson.blocks on this line.

Oh my gosh it’s working!! Thank you @kendall!

1 Like