Showing a grid of events is a great way for someone to browse, but once one catches their attention, they want to dig in for more info, or maybe they want a way to share a direct link to that event. Either way, we want to be able to have a page that requests an individual event, not a whole list of them.

We have some flexibility in how we request our data with the Appwrite SDK, where we can use the Get Document endpoint to pass in a single ID and get all the data for that particular event. This will allow us to work together with our router to dynamically get that value based on navigation and look up that individual event.

We’ll make this work by first requesting a single document by passing in a static example ID. Later, we’ll use the router to get our individual event’s ID dynamically. In order to clean things up, we’ll see how we can start to refactor and abstract some of our data transformation logic as well as how we can use Appwrite’s included Types to make sure we’re fully type-safe when working with Documents.

What You’ll Learn

• Request a Document by ID from a Database Collection
• Import and use the Appwrite Document Type
• Abstract and share data transformation functions
• Type local state when using the useState hook
• Use a router to dynamically use a path ID variable for requesting a Document

Resources

• Get a Document
• Routing in React.js with Wouter