{"id":36234,"date":"2024-10-29T07:00:00","date_gmt":"2024-10-29T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36234"},"modified":"2025-04-16T12:38:06","modified_gmt":"2025-04-16T19:38:06","slug":"cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-2","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cloudinary-asset-loader-astro-headless-wordpress-wpgraphql-part-2","title":{"rendered":"Cloudinary Asset Loader for Astro and Headless WordPress Using WPGraphQL (Part 2)"},"content":{"rendered":"\n

In Part 1<\/a>, we\u2019ll set up WordPress as a headless CMS with WPGraphQL, grab our public ID data from our specific Cloudinary assets, and create the custom field in WordPress that is necessary to link the Cloudinary asset ID\u2019s to WordPress and Astro. <\/p>\n\n\n\n

In Part 2, we\u2019ll put everything together by creating an Astro app and rendering it on the browser.<\/p>\n\n\n\n

Create an Astro Project<\/h2>\n\n\n\n

The first thing we need to do is create a new Astro project.   <\/p>\n\n\n\n

    \n
  1. Go to your terminal and run these commands:<\/li>\n<\/ol>\n\n\n
    npm<\/span> create<\/span> astro<\/span>@latest<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0npm install astro-cloudinary\n\nnpm\u00a0 install graphql<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      \n
    1.  Once you do that, create a .env.local file in the root of your project and add these keys and values, and paste the values in from your Cloudinary account accordingly.<\/li>\n<\/ol>\n\n\n
      PUBLIC_CLOUDINARY_CLOUD_NAME=\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0PUBLIC_CLOUDINARY_API_KEY=\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CLOUDINARY_API_SECRET=\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0WORDPRESS_API_URL=<\/code><\/span><\/pre>\n\n\n
      Once you paste those keys into your .env.local<\/code> file, you can add the respective values they need. Your Cloudinary values can all be found in your Cloudinary account dashboard and your WP API URL is your WordPress site\u2019s URL.  <\/p>\n\n\n\n
      Connect Astro and WordPress via WPGraphQL<\/h2>\n\n\n\n
      Now that we have the environment variables setup in our Astro project, the next step is to create some GraphQL requests to fetch data from WordPress. In the src<\/code> folder, create another folder called lib<\/code>. In this lib<\/code> folder, create a file called api.js<\/code>. In that file, copy and paste this code block: <\/p>\n\n\n
      const<\/span> WORDPRESS_API_URL = import<\/span>.meta.env.WORDPRESS_API_URL;\n\nexport<\/span> async<\/span> function<\/span> navQuery<\/span>(<\/span>) <\/span>{\n\n\u00a0\u00a0const<\/span> siteNavQueryRes = await<\/span> fetch(WORDPRESS_API_URL, {\n\n\u00a0\u00a0\u00a0\u00a0method<\/span>: \"POST\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0headers<\/span>: { \"Content-Type\"<\/span>: \"application\/json\"<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0body<\/span>: JSON<\/span>.stringify({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0query<\/span>: `\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0menus(where: {location: PRIMARY}) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0menuItems {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0order\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0label\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0generalSettings {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0description\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0});\n\n\u00a0\u00a0const<\/span> { data } = await<\/span> siteNavQueryRes.json();\n\n\u00a0\u00a0return<\/span> data;\n\n}\n\nexport<\/span> async<\/span> function<\/span> homePagePostsQuery<\/span>(<\/span>) <\/span>{\n\n\u00a0\u00a0const<\/span> response = await<\/span> fetch(WORDPRESS_API_URL, {\n\n\u00a0\u00a0\u00a0\u00a0method<\/span>: \"POST\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0headers<\/span>: { \"Content-Type\"<\/span>: \"application\/json\"<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0body<\/span>: JSON<\/span>.stringify({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0query<\/span>: `\n\n\u00a0\u00a0\u00a0\u00a0query GetPosts {\n\n\u00a0\u00a0posts {\n\n\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\n\nuri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cloudinaryAsset{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cloudinaryPublicId\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0});\n\n\u00a0\u00a0const<\/span> { data } = await<\/span> response.json();\n\n\u00a0\u00a0return<\/span> data;\n\n}\n\nexport<\/span> async<\/span> function<\/span> getNodeByURI<\/span>(uri<\/span>) <\/span>{\n\n\u00a0\u00a0const<\/span> response = await<\/span> fetch(WORDPRESS_API_URL, {\n\n\u00a0\u00a0\u00a0\u00a0method<\/span>: \"POST\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0headers<\/span>: { \"Content-Type\"<\/span>: \"application\/json\"<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0body<\/span>: JSON<\/span>.stringify({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0query<\/span>: `\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0query GetNodeByURI($uri: String!) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodeByUri(uri: $uri) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0__typename\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isContentNode\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isTermNode\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0... on Post {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featuredImage {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0srcSet\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sourceUrl\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0altText\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mediaDetails {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0... on Page {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0content\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0... on Category {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0posts {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0date\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0excerpt\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0categories {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0name\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0featuredImage {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0node {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0srcSet\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sourceUrl\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0altText\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mediaDetails {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0variables<\/span>: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri<\/span>: uri,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0});\n\n\u00a0\u00a0const<\/span> { data } = await<\/span> response.json();\n\n\u00a0\u00a0return<\/span> data;\n\n}\n\nexport<\/span> async<\/span> function<\/span> getAllUris<\/span>(<\/span>) <\/span>{\n\n\u00a0\u00a0const<\/span> response = await<\/span> fetch(import<\/span>.meta.env.WORDPRESS_API_URL, {\n\n\u00a0\u00a0\u00a0\u00a0method<\/span>: \"POST\"<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0headers<\/span>: { \"Content-Type\"<\/span>: \"application\/json\"<\/span> },\n\n\u00a0\u00a0\u00a0\u00a0body<\/span>: JSON<\/span>.stringify({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0query<\/span>: `\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0query GetAllUris {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0posts(first: 100) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0pages(first: 100) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0nodes {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`<\/span>,\n\n\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0});\n\n\u00a0\u00a0const<\/span> { data } = await<\/span> response.json();\n\n\u00a0\u00a0\/\/ Combine all URIs from posts and pages<\/span>\n\n\u00a0\u00a0const<\/span> uris = [...data.posts.nodes, ...data.pages.nodes]\n\n\u00a0\u00a0\u00a0\u00a0.filter((node<\/span>) =><\/span> node.uri !== null<\/span>)\n\n\u00a0\u00a0\u00a0\u00a0.map((node<\/span>) =><\/span> ({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0params<\/span>: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uri<\/span>: node.uri.substring(1<\/span>), \/\/ Remove leading '\/' if necessary<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0}));\n\n\u00a0\u00a0return<\/span> uris;\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      This entire code block is all our GraphQL queries needed for this site. Its function is to fetch the post title, URI, and the custom cloudinaryPublicId<\/code> field from WordPress. It will also allow us to add a dynamic route file for a single post detail page.<\/p>\n\n\n\n
      Create a Home Page to Render Cloudinary Assets<\/h2>\n\n\n\n
      We’re now ready to create a home page that renders Cloudinary assets and matches posts from WordPress to a Cloudinary public ID. In src\/pages\/index.js<\/code>, copy and paste this code block in:<\/p>\n\n\n
      ---\n\nimport<\/span> { getCollection } from<\/span> 'astro:content'<\/span>;\n\nimport<\/span> { CldImage } from<\/span> 'astro-cloudinary'<\/span>;\n\nimport<\/span> { homePagePostsQuery } from<\/span> \"..\/lib\/api\"<\/span>;\u00a0 \/\/ Your WPGraphQL query function<\/span>\n\n\/\/ Fetch the Cloudinary assets<\/span>\n\nconst<\/span> assets = await<\/span> getCollection('assets'<\/span>);\n\n\/\/ Fetch the posts data from WordPress using the homePagePostsQuery function<\/span>\n\nconst<\/span> data = await<\/span> homePagePostsQuery();\n\nconst<\/span> posts = data.posts.nodes;\n\n\/\/ Debugging: Log assets and posts to check the structure<\/span>\n\nconsole<\/span>.log(\"Cloudinary Assets:\"<\/span>, assets);\n\nconsole<\/span>.log(\"WordPress Posts:\"<\/span>, posts);\n\n\/\/ Match posts to assets based on cloudinaryPublicId<\/span>\n\nconst<\/span> galleryItems = posts.map(post<\/span> =><\/span> {\n\n\u00a0\u00a0if<\/span> (!post.cloudinaryAsset || !post.cloudinaryAsset.cloudinaryPublicId) {\n\n\u00a0\u00a0\u00a0\u00a0return<\/span> { post, asset<\/span>: null<\/span> };\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/\/ Use the cloudinaryPublicId directly from WordPress (no need to prepend folder)<\/span>\n\n\u00a0\u00a0const<\/span> fullCloudinaryPublicId = post.cloudinaryAsset.cloudinaryPublicId;\n\n\u00a0\u00a0\/\/ Log the constructed full public ID for debugging<\/span>\n\n\u00a0\u00a0console<\/span>.log(\"Post Full Cloudinary Public ID:\"<\/span>, fullCloudinaryPublicId);\n\n\u00a0\u00a0\/\/ Try to find the matching asset<\/span>\n\n\u00a0\u00a0const<\/span> matchedAsset = assets.find(asset<\/span> =><\/span> asset.data.public_id === fullCloudinaryPublicId);\n\n\u00a0\u00a0\/\/ Log if a match was found or not<\/span>\n\n\u00a0\u00a0if<\/span> (matchedAsset) {\n\n\u00a0\u00a0\u00a0\u00a0console<\/span>.log(`Match found for post: ${post.title}<\/span>`<\/span>);\n\n\u00a0\u00a0} else<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0console<\/span>.log(`No match found for post: ${post.title}<\/span>`<\/span>);\n\n\u00a0\u00a0}\n\n\u00a0\u00a0return<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0post,\n\n\u00a0\u00a0\u00a0\u00a0asset<\/span>: matchedAsset || null<\/span>\u00a0 \/\/ Fallback in case no asset is found<\/span>\n\n\u00a0\u00a0};\n\n});\n\n---\n\n<main<\/span>><\/span>\n\n\u00a0\u00a0<h1<\/span> class<\/span>=\"h1\"<\/span>><\/span>Headless WP Astro Asset Loader Gallery<\/h1<\/span>><\/span>\n\n\u00a0\u00a0<div<\/span> class<\/span>=\"gallery\"<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0{galleryItems.map(({ post, asset }) => (\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"gallery-item\"<\/span> id<\/span>={post.uri}<\/span> ><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{asset ? (\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a<\/span> href<\/span>={post.uri}<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<CldImage<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src<\/span>={asset.data.public_id}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width<\/span>={300}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height<\/span>={200}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0crop<\/span>=\"fill\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0gravity<\/span>=\"auto\"<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt<\/span>={post.title}<\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0) : (\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p<\/span>><\/span>No corresponding asset found<\/p<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3<\/span>><\/span><a<\/span> href<\/span>={post.uri}<\/span>><\/span>{post.title}<\/a<\/span>><\/span><\/h3<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n\n\u00a0\u00a0\u00a0\u00a0))}\n\n\u00a0\u00a0<\/div<\/span>><\/span>\n\n<\/main<\/span>><\/span><\/span>\n\n<style<\/span>><\/span>\n\n\u00a0\u00a0.h1<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0text-align<\/span>: center;\n\n\u00a0\u00a0\u00a0\u00a0font-family<\/span>: monospace;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/* Flexbox layout for gallery *\/<\/span>\n\n\u00a0\u00a0.gallery<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0display<\/span>: flex;\n\n\u00a0\u00a0\u00a0\u00a0flex-wrap<\/span>: wrap;\n\n\u00a0\u00a0\u00a0\u00a0justify-content<\/span>: space-between;\n\n\u00a0\u00a0\u00a0\u00a0padding<\/span>: 20px<\/span>;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/* Style for each gallery item *\/<\/span>\n\n\u00a0\u00a0.gallery-item<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0margin<\/span>: 10px<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0text-align<\/span>: center;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/* Set width to ensure consistent sizing *\/<\/span>\n\n\u00a0\u00a0.gallery-item<\/span> img<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0max-width<\/span>: 100%<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0height<\/span>: auto;\n\n\u00a0\u00a0\u00a0\u00a0border-radius<\/span>: 8px<\/span>;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/* Ensure h3 and description are styled properly *\/<\/span>\n\n\u00a0\u00a0.gallery-item<\/span> h3<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0margin-top<\/span>: 10px<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0font-size<\/span>: 16px<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0font-weight<\/span>: bold;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0\/* Add styling for the \"Read More\" links *\/<\/span>\n\n\u00a0\u00a0a<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0display<\/span>: inline-block;\n\n\u00a0\u00a0\u00a0\u00a0margin-top<\/span>: 10px<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0color<\/span>: #003559<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0text-decoration<\/span>: none;\n\n\u00a0\u00a0\u00a0\u00a0font-weight<\/span>: bold;\n\n\u00a0\u00a0\u00a0\u00a0font-size<\/span>: large;\n\n\u00a0\u00a0}\n\n\u00a0\u00a0a<\/span>:hover<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0text-decoration<\/span>: underline;\n\n\u00a0\u00a0}\n\n<\/span><\/style<\/span>><\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Let\u2019s break this down since there is a bit of code in this block.  At the top of the file, we import the necessary things we need:<\/p>\n\n\n\n