React Hooks must be called in a React function component when using React RTK query createApi

Question

I'm creating 2 endponits using React RTK query

export const countryApi = createApi({
    reducerPath: "countryApi",
    baseQuery: fetchBaseQuery({ baseUrl: "https://restcountries.com/v3.1/" }),
    endpoints: (builder) => ({
    getCountries: builder.query({
    query: () => `all/`
    }),
   getCountryByName: builder.query({
    query: (name) => `name/${name}`
    })
  })
});

Then i need to show results with condition, if the state of search input change i call the second endponit otherwise i use the 1st enpoint to show all the list of countries

// country search state
const [search, setSearch] = useState("");
let countryData;
countryData =
  search === ""
    ? useGetCountriesQuery().data
    : useGetCountryByNameQuery(search,{skip: search ===""}).data;

But i got an error enter image description here

TkDodo · Accepted Answer · 2022-02-26 15:11:42Z

1

You cannot call hooks conditionally, that is against the rules of hooks.

hooks must be called every time, in the same order, when a render functions runs. By having that ternary, this is not guaranteed to happen:

countryData =
  search === ""
    ? useGetCountriesQuery().data
    : useGetCountryByNameQuery(search,{skip: search ===""}).data;

You might call useGetCountriesQuery in one render cycle, and useGetCountryByNameQuery in another.

One way to solve this would be to call both hooks unconditionally, but skip them vice-versa. Or, combine the two queries into one hook if possible:

const countries = useGetCountriesQuery({ skip: search !== '' })
const countriesByName = useGetCountryByNameQuery(search,{skip: search ===""})

const countryData = search === "" ? countries.data : countriesByName.data

answered Feb 26, 2022 at 15:11

TkDodo

30.4k5 gold badges85 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Hooks must be called in a React function component when using React RTK query createApi

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related