# Solid

> @trpc12/tanstack-solid-query: a context provider for the client, useTrpc() in components, and useSubscription with reactive getters.

`@trpc12/tanstack-solid-query` re-exports [`@trpc12/tanstack-query`](https://v12.trpc.io/docs/integrations/tanstack-query.md) and adds a context for a client and its helpers, and a `useSubscription` whose fields are reactive.

```package-install
@trpc12/trpc @trpc12/tanstack-solid-query @tanstack/solid-query
```

## Provide the client

`createTrpcContext` takes the type of the function that makes the client (or of the client, or the router), so the helpers get what its links declare. It returns `[TrpcProvider, useTrpc, useTrpcClient]`, to name as you like; render the provider inside `QueryClientProvider`:

```tsx
const makeClient = () =>
  createTrpcClient({
    router: routerType<AppRouter>(),
    links: [httpLink({ url: '/trpc' })],
  });
export const [TrpcProvider, useTrpc] = createTrpcContext<typeof makeClient>();

const queryClient = new QueryClient();
const client = makeClient();

export const Root = () => (
  <QueryClientProvider client={queryClient}>
    <TrpcProvider client={client}>
      <App />
    </TrpcProvider>
  </QueryClientProvider>
);
```

## Queries and mutations

Pass an accessor to `useQuery`, so the options follow signals and props; a new input is a new key:

```tsx
function Post(props: { id: string }) {
  const trpc = useTrpc();
  const queryClient = useQueryClient();
  const post = useQuery(() =>
    trpc.post.byId.queryOptions({ input: { id: props.id } }),
  );
  const create = useMutation(() =>
    trpc.post.create.mutationOptions({
      onSuccess: () => queryClient.invalidateQueries(trpc.post.pathFilter()),
    }),
  );
  return (
    <button onClick={() => create.mutate({ title: 'New' })}>
      {post.data?.title}
    </button>
  );
}
```

## Subscriptions

`useSubscription` subscribes while the component is mounted. Its `status`, `data` (the latest event) and `error` are reactive getters, like `useQuery`'s result, so don't destructure them. The accessor is tracked, and a new input restarts the subscription:

```tsx
function Ticker(props: { from: number }) {
  const trpc = useTrpc();
  const ticks = useSubscription(() =>
    trpc.clock.ticks.subscriptionOptions({ input: { from: props.from } }),
  );
  return <p>{ticks.data}</p>;
}
```

What subscriptions share, and the query-cache forms (`liveOptions()`, `streamedOptions()`), are in [Subscriptions](https://v12.trpc.io/docs/integrations/tanstack-query/subscriptions.md).