Solid Query client

npm install @wundergraph/solid-query @tanstack/solid-query

// wundergraph.config.ts
configureWunderGraphApplication({
  // ... omitted for brevity
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      // the location where you want to generate the client
      path: '../src/components/generated',
    },
  ],
});

import { createHooks } from '@wundergraph/solid-query';
import { createClient, Operations } from './components/generated/client';

const client = createClient(); // Typesafe WunderGraph client

export const { createQuery, createMutation, createSubscription, createFileUpload, useUser, useAuth, queryKey } =
  createHooks<Operations>(client);

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>...</div>
    </QueryClientProvider>
  );
}

const weather = createQuery({
  operationName: 'Weather',
  input: { forCity: city },
});

const weather = createQuery({
  operationName: 'Weather',
  input: { forCity: city },
  liveQuery: true,
});

const weather = createSubscription({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
});

const mutation = createMutation({
  operationName: 'SetName',
});

mutation.mutate({ name: 'WunderGraph' });

await mutation.mutateAsync({ name: 'WunderGraph' });

const uploader = createFileUpload();

uploader.upload({
  provider: 'minio',
  files: new FileList(),
});

const { login, logout } = useAuth();

login('github');

logout({ logoutOpenidConnectProvider: true });

const user = useUser();

user.data;

const queryClient = useQueryClient();

const mutation = createMutation({
  operationName: 'SetName',
  onSuccess() {
    queryClient.invalidateQueries(queryKey({ operationName: 'Profile' }));
  },
});

mutation.mutate({ name: 'WunderGraph' });