WHAT YOU’LL LEARN
- how to create a simple page that's responsible for displaying details for a particular pin
- how to execute GraphQL queries using already configured Apollo Client
- how to read parameters sent via URL and use them in React components
Can I use this?
In order to follow this tutorial, you must use Webiny version 5.14.0 or greater.
The final piece of the puzzle is the Pin Details page.
So, once a user clicks on a pin on the Homepage, we want to redirect her/him to a dedicated pin page, that will show a bit more information about it:
- cover image
For now, since we didn't cover security and file upload functionality yet, we'll leave the author information and cover image blank. We'll revisit this page and add the missing pieces soon, in the upcoming sections of this tutorial.
Unlike with the Homepage, where we already had some code in the already existing
home.tsx file, for the Pin Details page, we'll need to create a new
pinDetails.tsx file. The file will contain the
PinDetails React component which we'll export via a new
As we can see, we're still using the Ant Design React library to build the majority of the Pin Details page. And we're again using the Apollo Client and its
useQuery React hook to retrieve the pin data. But, notice how, in order to retrieve it, we need an ID of the pin, which is actually passed via the page URL, for example:
In order to form this URL structure and be able to read the ID from it, we've passed
/pins/:id as the
path prop to our
Once we have that, the ID of the pin can be easily retrieved within our
PinDetails React component, via
props.match.params.id, for example:
This is what lets us define the type of
props.match.params and, ultimately, freely access
In case you missed it, the
@webiny/react-router library is a thin wrapper around the popular React Router and its
react-router-dom library, which just adds a couple of minor features to it. For example, via the
ReactRouterOnLinkPlugin plugin, it gives developers the ability to execute a piece of code for every link that's rendered on the page.
Without doing this step, visiting the Pin Details page still wouldn't work. The user would simply receive a Not Found page instead.
If you tried to check the results of the changes we've done so far, in terms of the functionality, everything should work as expected. The only thing we could do here is add a bit of styling, just so the page looks a bit nicer and more polished.
Finally, with all of the both React and Sass code in place, if we were to click on an arbitrary pin from the homepage, we should be redirected to the Pin Details page and see something like the following:
If that's the case, then all of the steps were performed correctly. This also means we can move on to the following section of this tutorial, in which we'll talk about securing your application.
The Security section of the Create Custom Application tutorial is coming soon! In the meantime, you can join our
Slack community. We'd be glad to assist you with any comments, questions, or any other kind of feedback you might have.