In any CMS, when your users make changes, your CMS frontend will post to a backend, and your changes are persisted.
With Tina, you can plug in your own "backend" to store you content wherever you like!
Let's take a look at a basic Tina form configuration:
//..
function PageContent() {
const formConfig = {
id: 'my-content-form',
label: 'Edit Page',
fields: [
//...
],
initialValues: pageData,
onSubmit: async () => {
window.alert('Saved!')
},
}
}As is, that code snippet will show an alert when the form is saved. Is reality, you would likely want to save the changes to a backend instead.
In general, all Tina backends share the following responsibilities
To setup a backend, we can configure a "backend" within our CMS setup.
For example, The GitHub backend is configured like this:
function App() {
const cms = new TinaCMS(
apis: {
github: new GithubClient({
clientId: process.env.GITHUB_CLIENT_ID,
baseRepoFullName: process.env.BASE_REPO_FULL_NAME,
// ...
})
}
)
return (
<TinaProvider cms={cms}>
<TinacmsGithubProvider
//some options...
>
<PageContent />
</TinacmsGithubProvider>
</TinaProvider>
)
}
export default App
//...Now that we have a backend configured, our forms can load/save content to the backend:
//..
function PageContent() {
+ const {fetchFile, commit} = useGithubFile({someOptions})
const formConfig = {
id: 'my-content-form',
label: 'Edit Page',
fields: [
//...
],
- initialValues: pageData,
+ loadInitialValues: fetchFile
onSubmit: async () => {
- window.alert('Saved!')
+ onSubmit: commit
},
}
}The TinacmsGithubProvider that we wrapped our content with, will ensure attach an authentication to all load/save requests. This way, only our editors can make changes.