Query standards for Tanstack Query

typescriptreactnextjs
When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({

Install this rule for wispbit

Add this rule to wispbit and it will run when you open a pull request

Install this rule for Coderabbit

Copy the configuration below and add it to your repository as .coderabbit.yml in your project root.

reviews:
  path_instructions:
    - path: "*.ts,*.tsx"
      instructions: |
                
        When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
        
        1. Set appropriate `staleTime` based on how frequently the data changes
        2. Configure all refetching flags explicitly to prevent unnecessary network requests
        
        Bad:
        
        ```tsx
        const { data } = useQuery({
          queryKey: ["resource", id],
          queryFn: () => fetchResource(id),
          refetchOnMount: false,
          // Missing staleTime and other refetching settings
        })
        ```
        
        Good:
        
        ```tsx
        const { data } = useQuery({
          queryKey: ["resource", id],
          queryFn: () => fetchResource(id),
          refetchOnMount: false,
          refetchOnWindowFocus: false,
          refetchOnReconnect: false,
          staleTime: 5 * 60 * 1000, // 5 minutes
        })
        ```

Install this rule for Greptile

Greptile rules can be added through the web interface. Please see this documentation for details on how to add custom rules and context.

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

File Path Patterns:

*.ts
*.tsx

Install this rule for GitHub Copilot

Copilot instructions can be added through the interface. See the documentation for details on how to create coding guidelines.

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

File Path Patterns:

*.ts
*.tsx

Install this rule for Graphite Diamond

Diamond custom rules can be added through the interface. See the documentation for details on how to create custom rules.

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

File Path Patterns:

*.ts
*.tsx

Use with Cline

Copy the rule below and ask Cline to review your code using this rule

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

Use with OpenAI Codex

Copy the rule below and ask OpenAI Codex to review your code using this rule

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

Use with Cursor

Copy the rule below and ask Cursor to review your code using this rule

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

Use with Claude Code

Copy the rule below and ask Claude Code to review your code using this rule

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```

Install this rule for Windsurf

To set up rules for Windsurf Reviews, please see this documentation 

When using TanStack Query (React Query), always configure cache and refetching behavior explicitly:
1. Set appropriate `staleTime` based on how frequently the data changes
2. Configure all refetching flags explicitly to prevent unnecessary network requests
Bad:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  // Missing staleTime and other refetching settings
})
```
Good:
```tsx
const { data } = useQuery({
  queryKey: ["resource", id],
  queryFn: () => fetchResource(id),
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: 5 * 60 * 1000, // 5 minutes
})
```