Support mocking for separate backend and frontend development

[prodigy7]

As described in my ticket #506, I have tried to set up the backend and frontend as separate projects to enable the teams to develop the backend and frontend separately. As I have learned in the meantime, both parts are so closely connected that the separation would currently probably only be possible with a lot of effort.
I would like to see the frontend set up as a separate project through the support of data mocking. This would make it easier, as in my case, to work with different teams at the same time.

[reinink]

As noted on the Discord channel, it doesn't make sense to break apart the backend and front-end in an Inertia app, since that's exactly the architecture Inertia is designed to allow—a monorepo. Inertia embraces having a very tight coupling between the server and the client. It's a "feature". Inertia developers want to be able to create pull requests that add the necessary server-side and client-side code at the same time. If this isn't what you want, Inertia may not be right for you, and an API might be a better approach. 👍

[claudiodekker]

Alternatively, implement some 'mock' endpoints/result data so your FE teams can work on your FE while the BE team goes and replaces the mocks with actual implementations of the endpoints 👍

[cocosmos]

I found a way to achieve that! I have mocked the Inertia response using msw. This function will generate a mocked Inertia response:

// Import required modules from 'msw'
import { rest } from 'msw';

/**
 * Function to create an Inertia response for mocking purposes.
 * @param {string} url - The URL for which the response is being mocked.
 * @param {string} component - The name of the component associated with the response.
 * @param {Object} props - The props object to be included in the response.
 * @returns {Function} - A function that generates the mocked Inertia response.
 */
function makeInertiaResponse(url, component, props) {
  // Return a function that will be used as the response handler for the given URL
  return rest.get(url, (req, res, ctx) => {
    // Define the response properties
    const responseHeaders = {
      'Date': new Date().toUTCString(),
      'Vary': 'X-Inertia',
      'X-Inertia': true,
    };

    const responseBody = {
      component,
      props: { ...props },
      url,
      version: new Date().toISOString(),
    };

    // Return the mocked response with status code 200, headers, and JSON body
    return res(
      ctx.status(200),
      ctx.set(responseHeaders),
      ctx.json(responseBody)
    );
  });
}

It is useful for conducting tests, allowing you to simulate Inertia responses and ensure your application functions correctly under different conditions. In larger projects involving separate frontend and backend teams, this function facilitates collaboration. The frontend team can proceed with development by using the mocked Inertia responses while the backend team works on implementing the actual APIs.