CODEWITHSUNDEEP
rtk-query
Jason Bean
Jason Bean

Reputation: 111

redux RTK Query - set query state

I am trying to access and set the state of {name}, in the query URL so it can be updated with a search bar component. How do I access the state of {name}?

api

export const weatherApi = createApi({
  reducerPath: 'weatherApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.openweathermap.org/data/2.5/' }),
  endpoints: (builder) => ({
    getCityByName: builder.query({
        query: (name) => `weather?q=${name}&appid=${apiKey}`,
    }),
  }),
})

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetCityByName } = weatherApi;

would like to access and update state of {name} is this component

import React from 'react';
import { useState } from 'react';
import { weatherApi } from '../../api/apiSlice';

export default function Forecast() {

    const{ data, error, isLoading, isSuccess } = weatherApi.endpoints.getCityByName.useQuery('Dallas')
    
    
    console.log(weatherApi.endpoints.getCityByName)
    console.log(data);
    
    const kelvinToFarenheit = (k) => {
        return 1.8 * (k - 273.15) + 32;
    };

    return (
        
        <div>
            <h3>{data?.name}</h3>
            <article>Temp: {Math.floor(kelvinToFarenheit(data?.main.temp))}</article>
            <article>Feels Like: {Math.floor(kelvinToFarenheit(data?.main.feels_like))}</article>
        </div>
    )

}

Upvotes: 1

Views: 235

Answers (1)

Jason Bean
Jason Bean

Reputation: 111

I've been looking at this for days and just after posting I figure it out...irony

const [cityName, setCityName] = useState({name:"Dallas"})
const { data, error, isLoading, isSuccess } = weatherApi.endpoints.getCityByName.useQuery(cityName.name)

Upvotes: 1

Related Questions