Injection into loader and action

[alexojegu]

Would something like this be possible?

App.tsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { Client, cacheExchange, fetchExchange } from "@urql/core";

const router = createBrowserRouter([
  {
     path: "/",
     element: <Layout />,
     children: [
       {
         index: true,
         lazy: () => import("./pages/About.js");,
       },
   }
]);

const client = new Client({
  url: 'http://localhost:3000/graphql',
  exchanges: [cacheExchange, fetchExchange],
});

export default function App() {
  return <RouterProvider router={router} client={client} />;
}

About.tsx

import { TypeClient } from "@urql/core";
import { useLoaderData } from "react-router-dom";
import { aboutQuery } from "./query.js";

export async function loader<TypeClient>({ client, params }) {
  const result = await client.query({ query: aboutQuery, variables: { id: params.id } });
  
  return result;
}

export function Component() {
  let [{ data }] = useLoaderData();

  return (
    <div>
      <h2>About</h2>
      <p>{data.about.name}</p>
    </div>
  );
}

Component.displayName = "AboutPage";

And the same for actions.