RTK Query: Refetch when global state changes

[Raadski]

Greetings,
I'm trying to write a simple Redux application for fetching country specific news from a public API.

Every time my global state selectedCountry changes I want to trigger a refetch.
I'm using useGetNewsByCountryQuery in multiple components, selecting the state in each of them would get messy very fast.
It's worth noting I'm just starting with RTK query and have no idea if this even is the right approach so let me know if I'm doing it completely wrong.

Basically what I want to happen is:

1. selectedCountry is changed
2. RTK query takes the new value from the selectedCountrySlice and fetches
3. Data gets updated in all the components

apiSlice

export const newsApi = createApi({
  reducerPath: 'newsApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api/' }),
  endpoints: (builder) => ({
    getNews: builder.query<News, void>({
      query: () => `top?apiKey=${API_KEY}`,
      keepUnusedDataFor: 30
    }),
    getNewsByCountry: builder.query<News, void>({
      queryFn: async (_, { getState }) => {
        console.log('getNewsByCountry queryFn called.');
        const state = getState() as RootState;
        const country: string = state.selectedCountry.value.code;
        const response = await fetch(
          `articles?country=${country}&apiKey=${API_KEY}`
        );
        if (!response.ok) {
          throw new Error('Failed to fetch news.');
        }
        const data: News = await response.json();
        return { data: data as News };
      }
    })
  })
});

SelectedCountrySlice

export const selectedCountrySlice = createSlice({
  name: 'selectedCountry',
  initialState: {
    value: {
      code: 'us',
      name: 'United States'
    }
  },
  reducers: {
    setSelectedCountry: (state, action: PayloadAction<Country>) => {
      state.value = action.payload;
    }
  },
  extraReducers(builder) {
    builder.addMatcher(
      (action) => action.type === setSelectedCountry.type,
      (state, action) => {
        console.log('Selected country changed.');
      }
    );
  }
});

export const { setSelectedCountry } = selectedCountrySlice.actions;
export const selectedCountry = (state: any) => state.selectedCountry.value;

[markerikson]

The usual suggested pattern is to do this at the component level with the hooks:

const someValue = useSelector(selectSomeValue);
const { data } = useSomeQuery(someValue);

That way the query hook will re-run and fetch a new result every time someValue changes.

If you're doing that in many components, you could extract those lines into a custom hook and use that.

[phryneas]

That's also the reason that getState is not available in query: generally we do not want people to read state. queryFn gives you more freedom, but this is a dangerous thing to use. For refetches, only the arguments are taken into consideration.

[Raadski]

Thank you for the answer, made a custom hook and everything's working as intended

[saksham-tiwari]

@Raadski can you provide me the custom hook or explain how does that work. I am also having similar issue.

Issue: I am using RTK Query for getting data for my tables, I want to refetch data when I change my dateRange (global redux state)