Data Fetching | Yext Hitchhikers Platform
Overview
Most websites will want to fetch data and then use that data to populate content on a webpage. Generally, you will want to use the Content to store and manage this data but there are other approaches as well. This page will walk through the different ways you can manage data and pull it into your templates.
From Content
Data from the platform can be directly managed through the platform UI or the connectors framework to sync content from external data sources.
Page per Entity
The most common scenario is to create a page per a subset of entities in your platform. This could be for products, locations, help articles, or anything else. The Content schema is highly flexible and you can use Content as a full-blown CMS.
If you want to create a page per entity then create a template that is hooked up to a “stream”. A stream is a filtered set of entities in your Content. As the name implies this data source is streamed to your site and any time you make a change in the graph, your site will automatically regenerate any impacted pages.
Learn more about templates powered by streams .
Global Data
Another scenario is when you want to use data from the Content across all your pages. This is useful for data in headers and footers that applies across all screens. We call this global data. Generally, you will create a single Site entity in your graph and then have that automatically stream to every single template on your site.
Learn more about global data .
From Other APIs
Sometimes you will want to pull in content from APIs outside the Yext platform. We generally recommend using a connector to pull data directly into the platform, but you can also pull it directly into your front end. You can either pull in content at generation time or at page load time.
Generation Time
Each page will only generate one time and will only regenerate when the entity that is powering that page changes. If you want to fetch data from an external API at generation time you should use the transformProps function discussed
here
in the templates doc.
Page Load Time
You can also hit third-party APIs at the time of page load. This is done
client-side using standard React data fetching approaches
. The simplest way to do this is to hit an API in a useEffect hook. See below. Note that this will run after the user sees the page so you will want to show a loading state.
Here is a simple example using the fetch, useState, and useEffect.
import React, { useState, useEffect } from 'react';
// trucated for clarity...
const App: Template<TemplateRenderProps> = (props) => {
const [statusCode, setStatusCode] = useState("")
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/posts`)
.then((response) => {
console.log(response.stat)
setStatusCode(response.status)
});
}, []);
return <div>Status Code: {statusCode}</div>;
}
export default App;This function will run every time the page loads.
Page Load vs. Generation
Page load time is critical for SEO and user experience. The more that you can offload to static generation the better. If the API will not change over time we recommend using transformProps since that function will NOT impact page load time. Fetching data client-side is a good approach when the data changes frequently AND it’s not crucial to the page (usually below the fold).
