Introduction
Previously, I’d implemented the FoodItemsSearchPage
& FoodItemsSearch
components. But to make this page fully functional, I completed the services to enable food search from the FDC API, through an API service.
Update
- Firstly, I started implementing the the GraphQL definitions for the endpoint in
foodItemSearch.sdl.js
and a service returning returning dummy data fromfoodItemSearch.js
. - After this, I worked on integrating the
foodItemSearch
service with the FDC API, but I finally realized why developers love TypeScript, because the FDC API endpoint returned different values forservingSizeUnit
(e.g. GRM/grm instead of g, MLT/mlt instead of ml). - I also created the “Load more” button to fetch additional food items through pagination.
Next steps
- My implementation for the food item search feature turned out to be extremely buggy, so this is the first thing I need to fix before I move to anything else.
- Adding serving size selector to the
FoodCard
component & adding implementation of mutation to store the items the user has consumed.
Screenshots
Implementing the search feature
Top comments (0)