🌊
エラー:Argument of type 'string' is not assignable
現象
Reactで開発を進めていたところ、下記エラーに遭遇した。
TS2345: Argument of type 'string' is not assignable to parameter of type 'QueryKey'.
8 | const navigate = useNavigate()
9 | const queryClient = useQueryClient()
> 10 | const data = queryClient.getQueryData<Task[]>('tasks')
| ^^^^^^^
11 | console.log('rendered ReactQueryB')
12 | return (
13 | <>
該当ファイルのソースコードは下記の通り
import { FC } from "react"
import { useQueryClient } from "@tanstack/react-query";
import { useNavigate } from 'react-router-dom';
import { ChevronDoubleLeftIcon } from "@heroicons/react/solid"
import { Task } from '../types/types'
export const ReactQueryB: FC = () => {
const navigate = useNavigate()
const queryClient = useQueryClient()
const data = queryClient.getQueryData<Task[]>('tasks')
console.log('rendered ReactQueryB')
return (
<>
<p className="font-bold my-3">ReactQueryB</p>
{data?.map((task) => (
<p key={task.id}>{task.title}</p>
))}
<ChevronDoubleLeftIcon
onClick={() => navigate('/')}
className="h-5 w-5 mt-2 text-blue-500 cursor-pointer"
/>
<p className="text-sm">react query A</p>
</>
)
}
原因
types/types.tsファイルにて、id, title, tag, tag_name, created_at, updated_atの全てを要求しているため、エラーが発生していた。
export interface Task {
id: number
title: string
tag: number
tag_name: string
created_at: string
updated_at: string
}
解決策
types.tsが要求する形でReactQueryB.tsxで型を当てはめて、パラメータを作成する必要がある。例えば、下記の記載でエラーは解消される。
const data = queryClient.getQueryData<Task[]>([1, 'title', 1, 'tag_name', 'created_at', 'updated_at'])
Discussion