CODEWITHSUNDEEP
javascriptreactjsrtk-query
Da Moose
Da Moose

Reputation: 111

How can I make API calls conditionally using Redux Toolkit query/createApi?

I am only using RTK to make API calls. Not using for any state management stuff like using Slices or Redux Thunk etc. I don't have a clear understanding of those yet... (just a full disclosure)

I have tried this:

export const gymApi = createApi({
  reducerPath: 'gymApi',
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getAllWorkouts: builder.query({
      query: () => makeApiCall(`/exercises`),
    }),
    getWorkoutByBodyPart: builder.query({
      query: (bodyPart) => {
        console.log('BodyPart in GymApi:', bodyPart);
        if (bodyPart !== 'all') {
          return makeApiCall(`/exercises/bodyPart/${bodyPart}`);
        } else {
          return null;
        }
      },
    })
});

And tried this:

getWorkoutByBodyPart: builder.query({
      query: (bodyPart) => {
        console.log('BodyPart in GymApi:', bodyPart);
        if (bodyPart !== 'all') {
          return makeApiCall(`/exercises/bodyPart/${bodyPart}`);
        } else {
          return Promise.resolve({ data: [] }); // or Promise.resolve({}); 
        }
      },
    })

with no luck. I'm calling the hooks from the home page like this:

const Exercises = ({ exercises, setExercises, bodyPart }) => {
  // THE FOLLOWING WORKS. ONLY USGING STATIC DATA DUE TO API HARD LIMITS
  const { data: exercisesData, isFetching: isFetchingAllWorkouts } =
    useGetAllWorkoutsQuery();

  const { data: exercisesDataByCategory, isFetching: isFetchingByCategory } =
    useGetWorkoutByBodyPartQuery(bodyPart);

  useEffect(() => {
    if (exercisesData && exercisesDataByCategory) {
      if (bodyPart === 'all') {
        setExercises(exercisesData);
      } else {
        setExercises(exercisesDataByCategory);
      }
    }
  }, [exercisesData, bodyPart, isFetchingAllWorkouts, isFetchingByCategory]);

It is working but with every refresh, I get a Warning: "Category not found ..." from the API ... basically, there is no endpoint called "all" in the ExerciseDB API (in RapidAPIs). So every time an "all" is passed as a Category, it gives me a 401. Now the App works fine. I was just wondering if there is a cleaner way to do this. I mean, I don't wanna make a call to the API when the Category is "all".

I must say that I'm new to this. Trying to get out of using Fetch all the time and take advantage of RTK caching. Any help in the correct direction will be highly appreciated. Thanx in advance.

Upvotes: 0

Views: 3029

Answers (2)

Da Moose
Da Moose

Reputation: 111

My issue got resolved by RTK LazyQuery:


  const [
    getAllWorkouts,
    { data: exercisesData, isFetching: isFetchingAllWorkouts },
  ] = useLazyGetAllWorkoutsQuery();

  const [
    getWorkoutByPart,
    { data: exercisesDataByCategory, isFetching: isFetchingByCategory },
  ] = useLazyGetWorkoutByBodyPartQuery();

  useEffect(() => {
       
      if (bodyPart === 'all') {
        getAllWorkouts();
        setExercises(exercisesData);
        
      } else {
        getWorkoutByPart(bodyPart);
        setExercises(exercisesDataByCategory);
        setCurrentPage(1);
      }
     
  }, [exercisesData, bodyPart, isFetchingAllWorkouts, isFetchingByCategory]);

Upvotes: 1

markerikson
markerikson

Reputation: 67547

You can either pass {skip: true} as an option to the query hook, or import the special skipToken value from RTK and pass that as the query argument.

See the RTK docs for more details:

Upvotes: 1

Related Questions