ash-project / ash-project/ash_typescript

Generate tanstack query factory functions

Open
#51 2 comments 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
Elixir
Stars
102
Forks
29
Avg merge
3d 13h
Merged PRs (30d)
5

Description

### Code of Conduct

- [x] I agree to follow this project's Code of Conduct

### AI Policy

- [x] I agree to follow this project's AI Policy, or I agree that AI was not used while creating this issue.

### Is your feature request related to a problem? Please describe.

For anyone using tanstack react query and are exposing procedures via ash_typescript to the frontend, only direct async functions are provided, so for every query the dev has to manually write and wire up their query hooks which takes time and is prone to mistakes.
Another frustration that can be mitigated is migrating an existing trpc app over to ash_typescript. It is currently more involved because the user needs to refactor a potentially large number of preexisting hooks.

### Describe the solution you'd like

TRPC's latest redesigned tanstack query integration is simple and looks like this:
```typescript
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
export function Greeting() {
const trpc = useTRPC();
const myQuery = useQuery(trpc.path.to.query.queryOptions({ /** inputs */ }))
}
}
```
See usage docs [here](https://trpc.io/docs/client/tanstack-react-query/usage).
For each RPC, it provides either a `queryOptions({...})` or `mutationOptions({...})` function that returns sensible args to useQuery or useMutation, including `queryFn` and cache key, while letting the user override whichever properties they need.

I think that ash_typescript should, for each rpc:
1. Derive from the dsl if the rpc is a query or mutation
2. Generate a queryOptions or mutationOptions function. This could be optional if for example the user does not care about react query and wants to reduce generated code size if size difference is significant.
- To do this, examine how trpc provides the default queryFn and derives cache keys and if applicable, use a similar strategy here

### Describe alternatives you've considered

_No response_

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by examining the existing generated direct async functions and the linked tRPC TanStack Query usage documentation. Determine how the Ash DSL distinguishes queries from mutations, then define the generated queryOptions or mutationOptions behavior, including overridable queryFn and cache keys; done means each RPC exposes the appropriate helper.

Written by the indexing model from the issue text.

Assessment

Tech stack
elixir, react, typescript
Domain
api, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.