// main.ts
import { TrpcVueQueryPlugin } from "@colonel-sandvich/trpc-vue-query";
import { VueQueryPlugin } from "@tanstack/vue-query";
import { httpBatchLink } from "@trpc/client";
import { createApp } from "vue";
import App from "./src/App.vue";

export const app = createApp(App);

app
  .use(VueQueryPlugin) // Make sure {@tanstack/vue-query}'s plugin goes first
  .use(TrpcVueQueryPlugin, {
    trpcClient: {
      // See trpc.io docs for your options here
      links: [
        httpBatchLink({
          url: "http://localhost:3000",
        }),
      ],
    },
  })
  .mount("#app");

// src/composables/useClient.ts
import { TrpcVueClient, clientKey } from "@colonel-sandvich/trpc-vue-query";
import { inject } from "vue";
import type { AppRouter } from "your-path-to-trpc-app-router-type";

export function useClient() {
  return inject(clientKey) as TrpcVueClient<AppRouter>;
}

// src/plugins/01.vueQueryPlugin.ts

// Important that this plugin comes before the `02.clientPlugin` since that has this plugin as a dependency
export default defineNuxtPlugin((nuxt) => {
  nuxt.vueApp.use(VueQueryPlugin);

  // Below is for SSR. Remove if you don't need this
  // Provided from TanStack Query docs: https://tanstack.com/query/v5/docs/vue/guides/ssr
  const vueQueryState = useState<DehydratedState | null>("vue-query");

  if (process.server) {
    nuxt.hooks.hook("app:rendered", () => {
      vueQueryState.value = dehydrate(queryClient);
    });
  }

  if (process.client) {
    nuxt.hooks.hook("app:created", () => {
      hydrate(queryClient, vueQueryState.value);
    });
  }
});

// src/plugins/02.clientPlugin.ts

export default defineNuxtPlugin(() => {
  const client = createTrpcVueClient<AppRouter>(
    {
      links: [
        httpBatchLink({
          url: "/api/trpc",
          headers: () => useRequestHeaders(),
          fetch: customFetchWrapper(), // Crucial for SSR
        }),
      ],
    },
    useQueryClient(),
  );

  return {
    provide: {
      client,
    },
  };
});

// src/composables/useClient.ts

export const useClient = () => {
  return useNuxtApp().$client;
};