We use cookies to improve your experience. By continuing, you agree to our use of cookies. Learn More
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>}
© TinaCMS 2019–2025