docs(example): Nuxt Data Fetch

[alexwpengine]

Description

WIP

Related Issue

closes #174

Type of Change

• ✅ Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to change)
• 🧹 Code refactoring (no functional changes)
• 📄 Example update (no functional changes)
• 📝 Documentation update
• 🔍 Performance improvement
• 🧪 Test update

How Has This Been Tested?

Screenshots

Checklist

• I have read the CONTRIBUTING document
• My code follows the project's coding standards
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (if applicable)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• Any dependent changes have been highlighted, merged or published

[ahuseyn]

@alexwpengine I had an issue running the example.
These are the steps I've taken:

1. npm run example:setup
2. npm run example:start

Here is the result:

 
ℹ Error: [GET] "http://127.0.0.1:63028/__nuxt_vite_node__/manifest": 500 Server Error

 ⁃ at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 ⁃ at async $fetchRaw2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:311:14)

   306 ┃          await callHooks(
   307 ┃            context,
   308 ┃            context.options.onResponseError
   309 ┃          );
   310 ┃        }
 ❯ 311 ┃        return await onError(context);
   312 ┃      }
   313 ┃      return context.response;
   314 ┃    };
   315 ┃    const $fetch = async function $fetch2(request, options) {
   316 ┃      const r = await $fetchRaw(request, options);

 ⁃ at async $fetch2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:316:15)
 ⁃ at async <anonymous> (node_modules/nuxt/dist/core/runtime/nitro/utils/renderer/build-files.js:14:20)
 ⁃ at async Object.render (node_modules/nuxt/dist/core/runtime/nitro/handlers/renderer.js:69:20)
 ⁃ at async Object.handler (node_modules/nitropack/dist/runtime/internal/renderer.mjs:25:22)
 ⁃ (async file://node_modules/h3/dist/index.mjs:2003:19)
 ⁃ at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
 ⁃ at async toNodeHandle (node_modules/h3/dist/index.mjs:2295:7)
 ⁃ at async b (node_modules/node-mock-http/dist/index.mjs:1:6808)

[CAUSE]
FetchError {
  stack: '[GET] "http://127.0.0.1:63028/__nuxt_vite_node__/manifest": 500 Server Error\n' +
  '    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\n' +
  'at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:311:14)\n' +
  'at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:316:15)\n' +
  'at async <anonymous> (./node_modules/nuxt/dist/core/runtime/nitro/utils/renderer/build-files.js:14:20)\n' +
  'at async Object.render (./node_modules/nuxt/dist/core/runtime/nitro/handlers/renderer.js:69:20)\n' +
  'at async Object.handler (./node_modules/nitropack/dist/runtime/'... 617 more characters,
  message: '[GET] "http://127.0.0.1:63028/__nuxt_vite_node__/manifest": 500 
  Server Error',
  name: 'FetchError',
  request: [Getter]
  options: [Getter]
  response: [Getter]
  data: [Getter]
  status: [Getter]
  statusCode: [Getter]
  statusText: [Getter]
  statusMessage: [Getter]
}

[alexwpengine]

@ahuseyn It's fixed. I had some svelte stuff hanging there. I used the svelte and next/client-app-router-fetch-data as examples in this PR.

You can review it briefly and let me know how it is, since I am not 100% ready but I think I'm getting there. I've added some basic styling and I'm trying to make any sample data visible and working (cats, tags, links clickable and routing correctly).

[ahuseyn]

Thanks @alexwpengine! I'll check ASAP.

[moonmeister]

@alexwpengine, Please respond to and close any review comments. You don't have to implement if you disagree, but please communicate your decisions.

UPDATE: Oops, I never submitted my review. My bad... it's there now

[moonmeister]

These look to be 2 separate queries that could be made individually.

[moonmeister]

Why are we not handling the home route with the template hierarchy?

[moonmeister]

Doing this means all templates are bundled together (unless Nuxt does some magic). This is not a pattern we want to demo.

[moonmeister]

This isn't the template hierarchy. It's a very simplified version. Check out my Asto or SvelteKit examples or their articles for info on implementing the template hierarchy correctly. https://wpengine.com/builders/astro-wordpress-routing-and-graphql/

[alexwpengine]

Thanks! I'll focus on it now.

I didn't do the template hierarchy because I thought it's about data fetching in this example and a very simplified way of routing. I agree it's much better that way.

[moonmeister]

If you want to keep this simple you can leave it as is, it's up to you. I was under the impression you were doing something like my examples and if that's not the case feel free to keep it simple.

[alexwpengine]

All fine, I will do it so we can cover more cases in 1 example