BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

Dynamic URLs with advanced data fetching

This tutorial will show how to have dynamic URLs using advanced data fetching to fetch different data baed on URL parts. This is very useful for things like showing a different user or product based on the url path (e.g. /products/:productId)

Watch the video below to learn how!

In this example, were going to show you how to make a page with dynamic URL parts (e.g. /users/something). Whatever the "/something” is, it will give you different data. We will also go over more advanced data fetching. Before this documentation, we recommend going through our other documentation on connecting custom data, which you do by using a URL. But, in this tutorial we will do everything ourselves so we can make it dynamic.

Custom JavaScript

Start off by creating a new page. We are going to call this page “fancy-data-fetching”. For the URL, we will enter in “/users”. We are going to use this API. Now, go over to the “Data” tab and instead of adding a remote data source by URL, we are going to edit the custom JS/CSS. This custom JS gives you access to the state object. You can add methods on this, properties, actions (e.g. on click), etc. But, for our example, we were going to fetch some data and then set it on the state. The fetch API in Builder is available client and server side. So note that when you fetch data as part of your content in Builder, you not only can run that client side, it can also be ran server side. For instance, using the HTML API to render content server side on your site when producing HTML, Builder will fetch any data and use that. Likewise, as long as you have a promise on the last root level line of your javaScript, Builder will always wait for that promise to resolve and will provide the full fetch API.

Now we are going to fetch our data. This is nice because using the full fetch API gives us access to add custom headers (or anything else, e.g. authentication), but in our case we don’t need any of this. But, we need the end of our URL to be dynamic. Builder includes state information for you by default so we can say let seed = state.location.path[1];. Path is an array of all of the parts of your path. So, because we’ve made our URL “/users”, the first path, path 0, will be users. Path 1 will be whatever comes next after the “/”. Now, we're going to add || ‘123’ . Having a default value is nice so when you’re editing in the editor, you don’t have to rely on that path existing yet. Now, we will replace the last part of our URL with + seed.

Targeting

We need to make sure the target is correct. Go to the target dropdown, and instead of the target “is” /users, change it to the target “starts with” /users. Now, Builder will match this page with any URL that starts with “/users”.

Binding

Now, we will start dropping in and creating our list of users. First, add a box that will be our container. Add another box that will be each user item,  then an image, then a text box. We will add some styling to make our content 200px in width. Now, lets bind this. Go to the “Data” tab, and click the “repeat for each” dropdown and select results.

Click on the image, and bind the image. Then click on the text, and bind the text. If you’re not familiar with binding, you can go through our previous documentation here.

Now in the preview, you can add “/users/foo” and you will see a new list of people displayed. If you refresh the page, you will see the same set of users.

Questions or comments?

Visit the Builder Forum

Visit our Github