> For the complete documentation index, see [llms.txt](https://shaunh.gitbook.io/kairos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shaunh.gitbook.io/kairos/data.md).

# Data

### WP GraphQL

Since we can’t determine the post type of pages vs posts by URI (due to how the permalinks are structured for those) we need to refactor to query all pages and post types like this.

{% embed url="<https://www.youtube.com/watch?t=28s&v=ze2un3ni1CY>" %}
Query by URI
{% endembed %}

This greatly simplifies how we’re handling routing since it will eliminate the need for subdirectories under the `/frontend/pages` path. With that in place we can simply dynamically render the correct single-item template (post/page/product/promotion/location, etc.) based on the post type of the node that’s returned.

### Real Data

We can pull JSON data from Sitefinity sites like this.

{% embed url="<https://www.belkorpag.com/api/default/dealerlocations?%24top=100>" %}

#### Connect to Dev Database

You can connect to the demo site's database to work with large data sets to save time. Just make the backend localhost url the same as the dev site url in the `constants.ts` file.

![simply make both of these variables match in order to work with demo site data in your local environment](/files/fMVvYF6wdsIw8Z8ewV2l)

### Utilize the Wordpress Rest API

{% code title="" %}

```javascript
fetch('/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(posts => console.log(posts));
```

{% endcode %}

{% embed url="<http://gravity-platform.local/wp-json/wp/v2/pages?slug=new-page>" %}
we can check block attributes here
{% endembed %}

### Use The Dev Site Database

You can switch to the dev db to work with some actual data on the frontend. Just be sure not to alter it in any way. For alterations, you can export the data from WPAllImport

{% code title="frontend/lib/sites.ts" %}

```typescript
const sites: { [key: string]: ISite } = {
	localhost: {
		nextDomain: "localhost:3000",
		wpUrl: "https://gravity-platform.local", // switch to https://gravity.mhpteamsi.com
		paymentGateway: "securesubmit",
		paymentGatewayPublicKey: "pkapi_cert_HCZzzvfjnDFZU5QZnQ",
		wcConsumerKey: "ck_6651c3a4c793b6118fb17fb3117e734b2e1b7a8e",
		wcConsumerSecret: "cs_9733155ac16169a22eaa58280b72a5407caf6a9b",
		theme: {
			colors: {
				primary: "purple",
				secondary: "gray"
			}
		}
	},
```

{% endcode %}

### Block Attributes

{% hint style="info" %}
WP sends attributes as an array instead of object when none are set
{% endhint %}

```javascript
attrs = {
  ...(!Array.isArray(attrs) ? attrs : {}),
  filterBy: attrs?.filterBy ?? "category",
  selectedCategoryIds: attrs?.selectedCategoryIds ?? [],
  selectedProductIds: attrs?.selectedProductIds ?? []
};
```

### Product Image Query Ideas

![Example GraphQL Query for Image SrcSet](/files/jvDTt5SXuApztxQVpzNQ)

### Rest API

{% embed url="<https://developer.wordpress.org/rest-api/reference>" %}
this is a nice resource for Rest API routes
{% endembed %}

### Embedded Image Fields

By default, posts come from the JSON API with only the ID of a featured image. But, there are embedded fields that can be utilized to get the image data.

```tsx
// WHEN THE CURRENT CATEGORY CHANGES, TO UPDATE THE CATEGORY ARRAY
const selectCategoryArray = useSelect(
	(select) => {
		return select("core").getEntityRecords("postType", currentCategory, {
			_embed: true,
		});
	},
	[currentCategory]
) as any[];
```

Here we are getting an array of posts from the WP database using [getEntityRecords](/kairos/gutenberg.md#getentityrecords). The third argument allows us to add options. When we set `_embed` to true, we get the extended data that we need to display images on the frontend.

```tsx
// THIS LOGIC MAKES IT POSSIBLE TO SHOW SWIPABLE CARDS WITH OR WITHOUT IMAGES
let cardImage;

if (post?._embedded["wp:featuredmedia"]) {
	cardImage = {
		sourceUrl: post?._embedded["wp:featuredmedia"][0]?.source_url,
		title: post?.title?.rendered ?? "",
		altText:
			post?._embedded["wp:featuredmedia"][0]?.alt_text ??
			post?.title?.rendered
	};

	cardProps.showPlaceHolderImage = true;
}
```

This is what the image data looks like in a loop over that array of posts when called from the frontend component.

### Manually Revalidate Cache

Paste this curl request into [Insomnia](https://insomnia.rest/) to manually revalidate cache.

```
curl --request GET \
  --url https://gravity-frontend.vercel.app/api/revalidate \
  --header 'Content-Type: application/x-www-form-urlencoded' \
  --data urlPath=/
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shaunh.gitbook.io/kairos/data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.