Framer Fetch and Display Dynamic Data from API

Introduction to Fetch

Hey all, it's Hunter! In this video, I'll be showcasing Framer's new feature called Fetch. This feature allows you to harness the power of APIs without the need for any coding knowledge. Fetch enables you to maintain your site's speed while adding dynamic data from a backend source. Let me walk you through some examples to illustrate the power of this tool.

Creating a View Counter

Let's start simple with a view counter, one of the first examples of dynamic information on a website. Select the text layer with the number zero on it, go to the content property, and you will find the new option to add a Fetch. In the Fetch UI, you can input a URL to any API endpoint.

To get you started, we have a few example endpoints built in. These endpoints are fantastic for truly dynamic data that is either unique to a user or unknown at the time of publishing. If it can be typed on the canvas or put into the CMS, you should do that instead for better SEO optimization.

We'll use the views endpoint and select the path field. Framer makes a test request to the API endpoint and builds a list of available information from that endpoint. You can then select which piece of information you want to use. In this case, we'll select the count. If you preview and reload a few times, you'll see that our view count is now working.

Fetching Visitor Location

Another common API use case is using the approximated city or country of the person visiting your site. For this, we can use the built-in location endpoint. Select that and choose the path field. Available options will be displayed, and in this instance, we'll select "city." Now, if we reload our page, we have dynamic data showing the visitor's city.

If the endpoint is slow or expensive to run, you can add a cache to reuse the fetched value for a specific duration, such as an hour. This ensures efficiency and quick response times for your web page.

Displaying Weather Information

For more complex use cases, like a travel website displaying weather conditions for multiple cities, Fetch can be utilized to create an encapsulated widget. Start by setting up a component with a city property that you can change. Add a Fetch to this component using the weather endpoint. Tokens like ":city" in the Fetch create variables you can edit using a field below, where you can type in a city name or bind it to an existing component variable.

For instance, link ":city" to a variable specified in your component. Whenever you change the property on the component, Fetch updates the information for the specified city. This can be set to show temperature in Celsius or Fahrenheit and the weather description.

Managing Fetch Component Loading States

Framer not only supports simple fetches but also allows for robust control over loading states and error handling within components. You can declare a loading variant, which is a special type of variant that displays while your component fetches the dynamic data. The error variant shows up when a fetch fails.

To better manage these states, you might want to eliminate fetched content in the loading variant so that it doesn't appear prematurely. In the error variant, you can add helpful error messages. You have full design control over how these states look and behave.

Optimizing Loading States with Visual Cues

Common patterns, like displaying gray boxes during content loading, can enhance the user experience. By adding separate layers with absolute positioning and setting them to opacity zero, you can create placeholders that conditionally display in the loading variant.

Draw small frames, style them with a gray color and slight border radius, and position them within your stacks. This ensures users know content is loading, providing a seamless experience while waiting for dynamic data.