{"pageProps":{"preview":false,"currentGuide":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]},"guideMeta":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/meta.json","data":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]}},"markdownFile":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/saving-to-strapi.md","data":{"frontmatter":{"title":"Saving to Strapi "},"excerpt":" Our next goal is to be able to save the edits we've made back to Strapi. We'll be doing this with a pretty simple GraphQL mutation. First, since we're dealing with image uploading we'll need access…","markdownBody":"\nOur next goal is to be able to save the edits we've made back to Strapi. We'll be doing this with a pretty simple GraphQL mutation.\n\nFirst, since we're dealing with image uploading we'll need access to the CMS object again so that the Strapi media store can help us out.\n\n**pages/posts/\\[slug\\].js**\n```diff\n- import { useForm, usePlugin } from \"tinacms\";\n+ import { useCMS, useForm, usePlugin } from \"tinacms\";\n  // ...\n\n  export default function Post({ post: initialPost, morePosts, preview }) {\n+   const cms = useCMS();\n    // ...\n```\n\nNow we'll replace the dummy `onSubmit` that we created earlier with a function that calls a GraphQL mutation to when we submit the form.\n\n**pages/posts/\\[slug\\].js**\n\n```js\n    onSubmit: async (values) => {\n      const saveMutation = `\n      mutation UpdateBlogPost(\n        $id: ID!\n        $title: String\n        $content: String\n        $coverImageId: ID\n      ) {\n        updateBlogPost(\n          input: {\n            where: { id: $id }\n            data: { title: $title, content: $content, coverImage: $coverImageId}\n          }\n        ) {\n          blogPost {\n            id\n          }\n        }\n      }`;\n      const response = await cms.api.strapi.fetchGraphql(\n        saveMutation,\n        {\n          id: values.id,\n          title: values.title,\n          content: values.content,\n          coverImageId: cms.media.store.getFileId(values.coverImage.url),\n        }\n      );\n      if (response.data) {\n        cms.alerts.success(\"Changes Saved\");\n      } else {\n        cms.alerts.error(\"Error saving changes\");\n      }\n    },\n```\n\nTake a read through the mutation, it's pretty simple! Strings prepended with a `$` are variables that we send as a second argument to the `fetchGraphql` function. We're doing a little bit of magic with `getFileId` because we need to pass GraphQL the **ID** of the uploaded image and not the **URL**.\n\nWith this in place, reload your site and enter edit mode. Now make some changes to a blog post and click the save button. If everything has gone well, those changes will have been sent to Strapi and saved.\n"}},"allGuides":[{"weight":300,"id":"gatsby","title":"Gatsby","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Gatsby Site","slug":"/guides/gatsby/adding-tina/project-setup"},{"id":"git","title":"Using a Git Backend with Gatsby","slug":"/guides/gatsby/git/installation"}]},{"weight":100,"id":"general","title":"General","collapsible":false,"items":[{"id":"inline-blocks","title":"Working with Inline Blocks","slug":"/guides/general/inline-blocks/overview"}]},{"weight":200,"id":"nextjs","title":"Next.js","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Next.js Site","slug":"/guides/nextjs/adding-tina/overview"},{"id":"git","title":"Using a Git Backend with Next.js","slug":"/guides/nextjs/git/getting-started"},{"id":"github","title":"Using GitHub with Next.js","slug":"/guides/nextjs/github/initial-setup"},{"id":"tina-with-strapi","title":"Using Tina With Strapi","slug":"/guides/nextjs/tina-with-strapi/overview"}]}],"tocItems":""},"__N_SSG":true}