Data should be readonly

[fedee13]

Describe the bug

I'm trying to mock some data because the type for data is Ref, but according to the warning is a redonly one?
https://vuejs.org/api/reactivity-core#readonly

const {
  data: ladders,
  isLoading,
  refetch
} = useQuery<LadderListResponse[]>({
  queryKey: ['ladders'],
  queryFn: () => competitionsApi.getLadders(),
  initialData: [],
  placeholderData: []
});

onMounted(async () => {
  await refetch();
  ladders.value = [
    {
      id: 1,
      name: 'Ladder 1',
      type: 'classic',
      visibility: 'public'
    }
  ];
});

Your minimal, reproducible example

Explained in description

Steps to reproduce

Explained in description

Expected behavior

Being able to modify data or change the type of it

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS, Windows, Linux, iOS, Android
• Browser: Chrome, Safari, Firefox

Tanstack Query adapter

vue-query

TanStack Query version

5.92.7

TypeScript version

5.9.3

Additional context

vue - 3.5.26

[TkDodo]

I don’t think you’re supposed to directly modify data like that. We have queryClient.setQueryData for updates.

[fedee13]

If that's the desired behaviour then, should data be a readonly ref and not a ref? So the intent is clear for the library's user....because a ref, at least to me, implies that can be modified.

[nacholaciar]

got curious and dug into the source. in useBaseQuery the state gets wrapped like this:

const readonlyState = readonly(state)
const object = toRefs(readonlyState)

so you get normal Refs pointing at a readonly object. that's why TS says it's writable (and isReadonly(data) even returns false) but the assignment just warns and does nothing. tested on 5.105.0:

data.value = mock          -> unchanged + "target is readonly" warning
qc.setQueryData([...], mock) -> data updates

it's on purpose since data mirrors the cache, so use queryClient.setQueryData(['ladders'], [...]) instead. agree the typing is misleading though, should probably be Readonly<Ref<T>>

[RafaelHDSV]

That warning is correct: Vue Query's data is a readonly snapshot of the cache. Assigning ladders.value = [...] mutates the ref Vue Query gave you, which is not a supported way to update cache and is why TypeScript flags it.

Do not write to data. Write to the cache:

import { useQuery, useQueryClient } from '@tanstack/vue-query'

const queryClient = useQueryClient()
const queryKey = ['ladders'] as const

const { data: ladders, isLoading, refetch } = useQuery({
  queryKey,
  queryFn: () => competitionsApi.getLadders(),
  initialData: [],
})

onMounted(async () => {
  await refetch()
  queryClient.setQueryData(queryKey, [
    {
      id: 1,
      name: 'Ladder 1',
      type: 'classic',
      visibility: 'public',
    },
  ])
})

If this is only for a test, prefer mocking the query function instead of poking cache in onMounted:

useQuery({
  queryKey: ['ladders'],
  queryFn: async () => [
    { id: 1, name: 'Ladder 1', type: 'classic', visibility: 'public' },
  ],
})

initialData / placeholderData seed the cache. After a successful fetch, data is whatever queryFn returned. Replacing .value does not go through setQueryData, so observers, structural sharing, and persistence all skip that write.

If you need a local editable copy (a form), clone it:

const draft = ref<LadderListResponse[]>([])
watch(ladders, (value) => {
  draft.value = value ? structuredClone(value) : []
}, { immediate: true })

Edit draft, then persist with a mutation and invalidateQueries.

If this cleared the readonly error, please mark this as the accepted answer.