astro-payload-template/astro/src/components/App.tsx

import { useQuery, useMutation, useQueryClient, queryOptions, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { ReactNode } from "react";
import { KiosMap } from "@/components/KiosMap"

export const queryClient = new QueryClient({
  defaultOptions: {
      queries: {
          staleTime: 30000,
      },
  },
});

interface AppProps {
  children?: ReactNode;
}

export const App: React.FC<AppProps> = (props) => {
  return (
    <div className="app">
      <QueryClientProvider client={queryClient}>
        {props.children}
        <KiosMap/>
      </QueryClientProvider>
    </div>
  );
}