Vite
Run hypequery next to a Vite frontend and proxy API requests in development.
Vite
This guide assumes you already have:
- a Vite + React app
- an
api/queries.tsfile exportingapi - a running hypequery server process
If not, start with Manual Installation or Quick Start.
We've simplified the serve API in v0.2. If you're looking for the older builder-first API, see Migrate from v0.1.x Serve API and v0.1.x Serve API.
Proxy API requests in development
Update vite.config.ts:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:4000',
changeOrigin: true,
},
},
},
});Generate typed React hooks
Create src/lib/hypequery.ts:
import { createHooks } from '@hypequery/react';
import type { ApiDefinition } from '../../api/queries';
export const { useQuery, useMutation } = createHooks<ApiDefinition>({
baseUrl: '/api',
});Wrap the app with QueryClientProvider
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
const queryClient = new QueryClient();
createRoot(document.getElementById('root')!).render(
<StrictMode>
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
</StrictMode>
);Use Node.js or Fetch Runtime Integration for the server process that hosts api.handler.