The goal for this exercise is to create a React app in Drupal that can fetch data from Drupal using the Drupal JSON API. We'll also look at loading data from an external API.
For an extra challenge, you may use a data fetching library to handle loading states, errors states, and client-side caching.
- Add a new React app in Drupal as a block module
- This can be a new module or feel free to reuse the same custom module from Part 1
- Sample content has been added to drupal.
- The Devel module can be useful for generating sample content, but you may also add content manually through the Drupal admin.
- The JSON API module has been enabled in Drupal
- A fetch request is being made from the The React app to the Drupal JSON API to load Drupal content in our React app.
- A fetch request is being made from the React app to an external API to display non-drupal content in the same React app.
- The PokeAPI is excellent for an external API option
- [Challenge] A data fetching library is used to handle loading and error states for fetch requests.
- [Challenge] A data fetching library is used handle client-side caching. TanStack Query is recommended for both Challenge criteria, but there are many other libraries that solve similar problems.
- Documentation: JSON:API Drupal Docs
- Tutorial: JSON:API Resource Requests
- Documentation: Using the Fetch API
- Documentation: Fetching data with Effects
- Documentation: TanStack Query Docs\
- Examples: TanStack Query Examples
// TODO - Example Solution in-progress