In this tutorials we will look at dynamic routing using the
extension from part 1.
course data from part 1 we will make routes like
https://your-site.com/course/course-name render content for that course.
1. Create an API to access course data based on it's ID
At the moment we have a
courses query that allows us to access all of the
courses. We now want to create a
course query so we can get a specific
i. Add to your API
ii. Add to your extensions GraphQL Schema
We will also need to add this query to our GraphQL schema.
iii. Test your endpoint.
You should now be able to test your GraphQL. Make sure
falcon-server is running and is on
Also remember to replace
YOUR_CONTENT_ID with your course ID.
2. Create your content query and component
You now need to create a component to access this data.
As before we want to add a content component and a query component.
At the moment we are only querying the title and description. If you want more data you'd have to add it to
server/src/falcon-content-extension/schema.graphql as well as your query here.
At the moment we just rendering the title, description and changing the page title.
Notice we are using
<Helmet> to change the page title. To learn more about this read how falcon manages meta data via helmet.
3. Return URL data from our API
<SwitchDynamicURL> is used for routing in Falcon Platform, it's worth looking at routing details here.
All APIs that are registered in our
server/config/default.json and contain both the below methods will be checked.
getFetchUrlPriority is used to set priority of your API. You might want to alter the priority if you're worried about URLs clashing. This is covered in our docs.
There is quite a bit going on here.
We are just returning the default priority set in
If you wanted to change this you could follow a similar pattern to the example below. This returns a low priority for all urls except 'hello'.
In this method we are checking a few things. Firstly we are checking the current path starts with
We then check all the courses to see if any of them have a matching
If they match then we return an
In our case we don't need to pass a
redirect so just pass a
If your URLs don't match remember to return null
4. Add a
<Route> check for your content type.
Now we need to check for our type,
In our example apps the routing is handled in
You will see here we pass the prop
type to our
<Route>. This will return the
Course component if the type matches.
n.b. If your'e using
loadable your component needs to be the default export
That's it. There is a lot covered in this short tutorial and it's highly recommended to read up on routing in more details.