🌊

エラー:Argument of type 'string' is not assignable

2022/12/05に公開

現象

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