reactjs - hvordan tilfredsstille TypeScript i spørringsfunksjonen til react-querys useQuery-hook

Jeg bruker useQuery-hooken fra react-query, og når jeg prøver å få tilgang til nøklene mine inne i query-funksjonen, altså 2. argument for useQuery, møter jeg et problem med TypeScript som klager på denne setningen

const postId = queryKey[1].id as any

det

Property 'id' does not exist on type 'string | { id: string | undefined; comments: boolean; }'.
  Property 'id' does not exist on type 'string'.ts(2339)

Alt fungerer fint, jeg har definert i postId, forespørselen sendes til serveren og jeg får et svar tilbake, problemet er med TypeScript, jeg har til og med prøvd å påstå typen men det fungerer ikke

  const { data } = useQuery(['post', { id: post?.id, comments: true }], async ({ queryKey }) => {
    const postId = queryKey[1].id as any
     const { data } = await axios.get(`/post/${postId}`, {
       headers: {
         Authorization: `Bearer ${user?.idToken}`,
       },
     })
     return data
  })

Finnes det en TypeScript-måte å løse dette på?

Svar #1

Typer av queryKey flyter veldig godt gjennom i react-query, men du må gi nøkkelen din en eksplisitt type. Hvis du bare gjør:

['post', { id: post?.id, comments: true }]

Typescript vil prøve å utlede det best mulige, som er et Array av strenger eller objekter. Hver posisjon kan ha en streng eller et objekt når det gjelder Typescript, så du kan ikke få tilgang til det andre elementet på den måten. Du må gi nøkkelen din en mer konkret type. Den enkleste måten er å bruke const-assertions:

['post', { id: post?.id, comments: true }] as const

Da vil TypeScript utlede en readonly-tuple der det første elementet er en streng og det andre elementet er et objekt. Med det bør tilgangen din fungere helt fint.

Relaterte artikler