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.
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;. 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
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”.
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.