CODEWITHSUNDEEP
typescriptredux-toolkit
jpxcar
jpxcar

Reputation: 147

How to infer type from query in RTK Query?

How to infer the type of the data coming from the query so that, I can have autocompletion in VS Code when populating my UI? I have been having a look at the content in the official docs but I was not able to understand how to do it,

https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery

Code below:

import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'

interface WeatherQuery {
    lat: Number | null;
    lon: Number | null;
    appid: string
}

export const coordQueryApi = createApi({
    reducerPath: 'coordQueryApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://api.openweathermap.org/data/2.5/'}),
    endpoints: (builder) => ({
        getCurrentPositionWeather: builder.query<any,WeatherQuery>({
            query: (arg) =>{
                const {lat, lon, appid} = arg
                return {
                    url: '/weather',
                    params: {lat, lon, appid}
                }
            }
        })
    })
})

export const { useGetCurrentPositionWeatherQuery } = coordQueryApi

thanks!

Upvotes: 0

Views: 4327

Answers (1)

lopburny
lopburny

Reputation: 61

You can define the type for the query result manually like this:

interface CurrentPositionWeatherResult {
  propA: string;
  propB: string;
}

getCurrentPositionWeather: builder.query<CurrentPositionWeatherResult,WeatherQuery>({

Basically, it is not possible to refer to the external API type directly. You need to check the API's definition or specification and define the type yourself. Some API might provide their type definition code or a client library for calling their API, and in that case, you can import the type and assign it directly.

Upvotes: 2

Related Questions