> 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=/
```