https://github.com/flycran/rtk-to-endpoints
A TypeScript Language Service Plugin that enhances IDE experience for RTK Query by enabling "Go to Definition" from hooks directly to endpoint definitions.
https://github.com/flycran/rtk-to-endpoints
ide rtk-query tsserver typescript
Last synced: about 1 month ago
JSON representation
A TypeScript Language Service Plugin that enhances IDE experience for RTK Query by enabling "Go to Definition" from hooks directly to endpoint definitions.
- Host: GitHub
- URL: https://github.com/flycran/rtk-to-endpoints
- Owner: flycran
- Created: 2026-03-07T17:42:55.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-05-02T08:57:54.000Z (about 1 month ago)
- Last Synced: 2026-05-02T10:29:29.311Z (about 1 month ago)
- Topics: ide, rtk-query, tsserver, typescript
- Language: TypeScript
- Homepage:
- Size: 244 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rtk-to-endpoints
English | [简体中文](./README.zh-CN.md)
A TypeScript Language Service Plugin that enhances IDE experience for RTK Query by enabling "Go to Definition" from hooks directly to endpoint definitions, with intelligent hover information.
## Features
- **Go to Definition**: Jump directly from RTK Query hooks to their endpoint definitions
- **Cross-file Support**: Works with hooks imported from other files (one level of import)
- **Rename Support**: Supports hooks imported with `as` alias (one level of import)
- **Hover Information**: Displays JSDoc comments and endpoint details (URL, HTTP method) on hover
## Problem
When using RTK Query, hook names (e.g., `useGetUserQuery`) are dynamically derived from endpoint names (e.g., `getUser`). TypeScript's "Go to Definition" can only point to type gymnastics, not directly to the endpoint definition in `createApi`.
## Solution
This plugin intercepts the "Go to Definition" request, recognizes RTK Query hook naming patterns, and navigates directly to the corresponding endpoint definition. It also provides rich hover information with endpoint details.
## Installation
```bash
npm install --save-dev rtk-to-endpoints
```
## Configuration
### 1. Add plugin to `tsconfig.json`
```json
{
"compilerOptions": {
"plugins": [
{
"name": "rtk-to-endpoints"
}
]
}
}
```
### 2. Switch VSCode to use workspace TypeScript
This plugin requires VSCode to use your workspace's TypeScript version instead of the built-in one.
**Steps:**
1. Open Command Palette:
- **Windows/Linux**: `Ctrl+Shift+P`
- **macOS**: `Cmd+Shift+P`
2. Run command: **TypeScript: Select TypeScript Version**
3. Select **Use Workspace Version**
4. **Reload the VSCode window** (`Ctrl+Shift+P` / `Cmd+Shift+P` → **Developer: Reload Window**) for the changes to take effect.
## Usage
### Go to Definition
After configuration, when you use "Go to Definition" (F12 / Cmd+Click) on any RTK Query hook:
```typescript
// Clicking on useGetUserQuery will jump to the getUser endpoint definition
const { data } = useGetUserQuery();
```
### Cross-file Imports
The plugin supports hooks imported from other files (up to one level of import):
```typescript
// api.ts
export const userApi = createApi({
endpoints: (builder) => ({
getUsers: builder.query({
query: () => '/users'
}),
})
})
export const { useGetUsersQuery } = userApi
// component.ts
import { useGetUsersQuery } from './api'
// ^ Jump works here!
```
### Import with Rename
Hooks imported with `as` alias are also supported:
```typescript
import { useGetUsersQuery as useUsers } from './api'
// ^ Jump works here too!
```
### Hover Information
Hover over any RTK Query hook to see:
- JSDoc comments from the endpoint definition
- HTTP method and URL
```typescript
export const userApi = createApi({
endpoints: (builder) => ({
/**
* Fetches all users from the API
*/
getUsers: builder.query({
query: () => '/users' // or: () => ({ url: '/users', method: 'GET' })
}),
})
})
```
Hovering over `useGetUsersQuery` will display:
- "Fetches all users from the API"
- Method: GET
- URL: /users
## Supported Hook Patterns
- `use{Endpoint}Query`
- `useLazy{Endpoint}Query`
- `use{Endpoint}Mutation`
- `use{Endpoint}QueryState`
- `use{Endpoint}InfiniteQuery`
- `use{Endpoint}InfiniteQueryState`
## Requirements
- TypeScript >= 4.0.0
## License
MIT