Layout & Design

Framer Update: Fetch — Leverage the power of APIs to add dynamic data to your Framer Site

Hunter

10:28

34K views

Jul 31, 2024

About this lesson

Introducing Fetch, a new feature enabling you to leverage the power of APIs to add dynamic data to your Framer Site—without any code.

https://framer.com/updates/fetch

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

MB01MTYMAQJCUID

0:00hey all it's hunter in this video I'll 0:02be showing you fetch a new feature that 0:05allows you to harness the power of apis 0:08without needing any code fetch lets you 0:11keep your site super fast while also 0:14adding Dynamic data from a back 0:16end I'll show you some examples now to 0:19help illustrate the power of this let's 0:22start simple with one of the first 0:23examples of dynamic info on a website a 0:26view 0:27counter if we select the text layer with 0:31the zero on it we can go to the content 0:34property and that's where you'll find 0:37the new option to add a 0:39fetch in the fetch UI we're greeted with 0:42an input and in here we can put a URL to 0:45any API endpoint to help getting started 0:49we have a few example endpoints built in 0:52these are great examples of the kind of 0:54things fetch should be used for trly 0:56dynamic data that is either unique to a 0:58user or cannot be known at the time of 1:01publishing rule of thumb is if it can be 1:04typed on the canvas or put into the CMS 1:06you should do that instead as it can be 1:08better optimized for 1:11SEO we'll use the views endpoint and 1:14select the path once selecting the path 1:16field prer makes a test request to that 1:19API endpoint and builds a list of all 1:21the information that's available from 1:24that endpoint then allows you to select 1:26from within that list which piece of 1:28information you want to use for this 1:30specific fetch in this case we'll select 1:32the 1:33count we heavily cach this value on the 1:36canvas but if we preview and reload a 1:39couple times we'll see that our view 1:42count is now 1:43working what fetch does is when someone 1:46views your website with a fetch on it 1:48framer will go to that API endpoint get 1:51that information bring it back and 1:54display it on your 1:55website another common use case for apis 1:58on a website is using the approximated 2:00city or country of the person visiting 2:03the website for this we can use the 2:06built-in location endpoint if we select 2:10that and go to the path field we can use 2:13the path field dropdown to see what bits 2:16of information are available here in 2:18this case we'll select city which is 2:20Amsterdam and that is indeed where I am 2:23right 2:24now now let's say that this Endo is 2:27either really slow or expensive for us 2:30to run we can add a cache that says do 2:34not refetch for this amount of time and 2:38instead just reuse that value that we 2:41got from the last time we actually 2:42performed the fetch in this case I'll 2:45use an hour because you're probably not 2:47moving around too much within an hour 2:50and if we reload our page we now have 2:52those two Dynamic pieces of information 2:54using Fetch with the location being 2:57cached for 1 hour 3:00to take this a step further let's say we 3:03have a travel website where we want to 3:05show the weather for multiple different 3:06cities we have a component set up with a 3:09city property that we can change and now 3:11we'll turn it into an encapsulated 3:13widget that fetches and displays the 3:15real weather information for that City 3:18let's start with the temperature and we 3:21will add a fetch to this using the 3:24weather 3:25endpoint and what you'll see different 3:28here is we'll see a colon and the word 3:31City whenever you use the colon in a 3:34fetch it creates a variable that you can 3:37edit using a field below so we can type 3:40in the word Amsterdam here or can assign 3:43a variable that's available in our 3:47component in this case we can use that 3:49City variable that we have set up and 3:51are already using in our component this 3:54will mean whenever we change the 3:55property on our component it'll also 3:57update the Fetch and get the information 4:00for that specific City we can select 4:03Celsius and do the same for our 4:07description I'll speed it up a 4:13bit let's preview our component and it 4:16looks good we now have the live weather 4:18but framer renders the fallback value 4:21while these fetches are loading this is 4:23great for simple fetches but with 4:25components we now give you the ability 4:28to have more control over what that 4:30loading state looks like we can do this 4:33by declaring a loading variant this is a 4:35special type of variant that only shows 4:37up once you've used a fetch in your 4:40component once we have that added we can 4:42also add an error 4:44variant these are automatically set up 4:47to show well a fetch is loading and when 4:50a fetch fails just like normal variants 4:53you have full design control on how you 4:55want these to look what I like to do is 4:58to delete the fetched content in the 5:00loading 5:02variant so that it doesn't appear when 5:04it's not ready yet and then add some 5:06helpful text to the error 5:19variant if we preview our 5:22component and refresh a couple 5:26times we can see that new loading 5:28variant showing up well the fetch is 5:30loading and so now that content only 5:32shows up when it's actually ready a 5:35common pattern you see online is 5:37displaying gray boxes where there will 5:39be content while loading I find it's 5:42best to do this as new separate layers 5:45that you conditionally display in the 5:47loading variant we'll start by drawing 5:49some little frames in these stacks and 5:51making them position absolute and then 5:54dragging them to the size that we want 6:01I'll style them with a gray color and a 6:03slight border 6:05radius we'll then set them to opacity 6:08zero on the primary variant and opacity 6:11of one on the loading variant this is 6:15nicer than use invisibility as you get a 6:17smooth transition between the variants 6:20and it's personal preference but I like 6:22to lock these gray Blox layers as well 6:23when I'm done setting them up so that I 6:25can easily select the other layers again 6:28if we preview my my component again it's 6:31looking really nice one more tiny bit of 6:33Polish we can do is adding a effects on 6:36the layers with the 6:39fetches so that once that loading 6:41variant is done transitioning into the 6:43primary 6:44variant those pieces of info will 6:47smoothly fade 6:51in and if we preview our component again 6:54we'll see that it is looking 6:58lovely now that that we're done our 7:00Dynamic component weather widget we can 7:03duplicate it and change the 7:06city and boom right away it shows the 7:10real weather for that City instead and 7:14what's so powerful about this is 7:16everything is encapsulated to use this 7:18component you don't have to know 7:20anything about fetches you just change 7:22the city and that's 7:28it where fetch really enters a new realm 7:32of possibility is using it with custom 7:34API endpoints this allows you to work 7:38right alongside an engineer to create 7:40something new or to use one of the apis 7:42that your company already has set 7:45up in this example we want to display 7:48the status of our servers on our framer 7:50site we generally recommend putting a 7:53small backend in between like a cloud 7:55flare worker so you can clean up the 7:57data for framer and store any secret 8:00tokens that would be impossible to store 8:02safely on the client so we have this 8:04small Cloud flare worker that hits our 8:07original endpoint sets any headers that 8:09are needed and make sure everything's 8:11ready to go into 8:15framer and we'll deploy that and there's 8:18nothing special that needs to be done to 8:20make this work in framer we just have a 8:23normal backend endpoint and we can paste 8:25that URL directly into our fetch 8:31we'll select the path for the 8:34message and now we have our server 8:36status on our site if we preview our 8:42site and refresh a few 8:45times we can now see our nice loading 8:48experience and our Dynamic data on our 8:51page and for one last thing before we go 8:54to show off other things you can do with 8:56fetch I also have an examples page here 8:59which has my live listening data a live 9:02stock example and the current moon phase 9:04with sunrise and sunset all using 9:07Dynamic data via the fetch 9:09feature and there's a couple more cool 9:11features to point out here in the 9:14gradient stock example we've set the 9:17stock fetch to a cache time of 10 9:19seconds and this means that every 10 9:22seconds when that cash runs out we 9:25perform a new Fetch and get the latest 9:27value this is great for for super 9:29Dynamic values that you want to update 9:31all the time another cool feature is in 9:34the music listening example here we're 9:37using a fetch on the fill property of a 9:39frame to display the image for the album 9:43Mark and what's cool here is that the 9:45loading variant will also wait for the 9:47image to be loaded so you can create 9:49native feeling animations knowing that 9:52the image will fully be there since this 9:54also means you'll be seeing the image 9:56placeholder and the loading States more 9:57often we also improved it visually so 10:00that it looks better in most 10:06designs and that has been an 10:08introduction to fetch I hope you enjoy 10:11fetching I would love to see what you 10:13build with it and I will see you in the 10:15next one

TeachesPlugins

Also coversComponent Variants Components Form Inputs Frames Stacks Transitions & Easing Variables

Watch on YouTube ↗

‹ 4 Ways to Update Form Status in Framer

Framer Design: Design on an intuitive Canvas ›