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.

Query by URI

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.

https://www.belkorpag.com/api/default/dealerlocations?%24top=100www.belkorpag.com

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

Utilize the Wordpress Rest API

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

http://gravity-platform.local/wp-json/wp/v2/pages?slug=new-pagegravity-platform.local

we can check block attributes here

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

frontend/lib/sites.ts

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"
			}
		}
	},

Block Attributes

WP sends attributes as an array instead of object when none are set

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

Rest API

Reference – REST API Handbook | Developer.WordPress.orgWordPress Developer Resources

this is a nice resource for Rest API routes

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.

// 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. 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.

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