Loving Tina? ⭐️ us on GitHubStar

We use cookies to improve your experience. By continuing, you agree to our use of cookies. Learn More

Docs

v.Latest
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference
Querying Tina Content Client-side at Runtime

Fetch data client-side

Fetching content on the server (SSR), or at build time (SSG) is preferred and faster but in some cases you may still want to get data client-side at runtime.

Here's an example of data-fetching client-side, on a React site:

import { useState, useEffect } from 'react'
import { useTina } from 'tinacms/dist/react'
import { client } from '../[pathToTina]/tina/__generated__/client'
// Variables used in the GraphQL query;
const variables = {
relativePath: 'HelloWorld.md',
}
export default function BlogPostPage() {
const [postQuery, setPostQuery] = useState(null)
const [isLoading, setLoading] = useState(false)
useEffect(() => {
const fetchContent = async () => {
setLoading(true)
const postResponse = await client.queries.post({
relativePath: 'HelloWorld.md',
})
setPostQuery(postResponse)
setLoading(false)
}
fetchContent()
}, [query, JSON.stringify(variables)])
const { data } = useTina({ postQuery?.query, postQuery?.variables, data: postQuery?.data })
if (isLoading) return <p>Loading...</p>
if (!data) return <p>No data</p>
return <div>{JSON.stringify(data)}</div>
}
Table of Contents