Accessing Page Query Data
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson focuses on retrieving data for our map visualization. We'll explore how to access data from the page query defined in the manifest document, rather than making GraphQL queries directly within the component. This approach promotes reusability and configurability. We'll specifically target retrieving a list of locations that stock a given product, a crucial step in displaying product availability on the map.
Key points
- Data Fetching Strategy: Learn why accessing data from the page query is preferred over making direct GraphQL queries within the component.
- Manifest-Driven Data: Understand how to define and configure data queries in the manifest, making data accessible to components.
- Data Access: This lesson demonstrates how to retrieve the list of locations stocking the product from the page query data.
- Product Availability: The retrieved data will be used to populate the map with markers indicating store locations and product availability.
In this client scenario, our goal is to find other available locations with this product in stock and display them on the map.
While it's possible to make GraphQL queries from within a component to fetch data, this can limit the reuse and customizability of a view component. In most cases, we'd prefer to have the component use data from the page query, which can then be configured in the manifest.
Watch the video below to learn how to access the data from the page query defined in the manifest document. This will return a list of all locations that stock the product.
Mapping and Accessing Data
This video explains how to access the data from the page query defined in the manifest document
