How to improve this react-query multiple queries conditionally called code

Question

I have a component that takes router urls params and trigger calls depending on these params.

Here's how I made it

const {
  data: data1,
  isLoading: isLoading1,
  isError: isError1,
} = useQuery({
  queryKey: [`test-${props.match.params.language}`],
  queryFn: () =>
    fetch(
      `${BASE_URL}${API_URLS.GET_QUIZ}/?languages=${props.match.params.language}&level=${props.match.params.difficulty}`
    ).then((response) => response.json()),
  enabled: props.match.params.source === "api",
});

const {
  data: data2,
  isLoading: isLoading2,
  isError: isError2,
} = useQuery({
  queryKey: [`test-${props.match.params.language}`],
  queryFn: () => {
    console.log("intoQuery");
    return fetch(
      `${BASE_URL}${API_URLS.TEST}/${props.match.params.language}`
    ).then((res) => res.json());
  },
  enabled: props.match.params.source === "intern",
});

useEffect(() => {
  console.log("data2", data2);
  console.log("data1", data1);
  if (props.match.params.source === "api") {
    setData(() => data1);
    setIsloading(isLoading1);
    setIsError(isError1);
  }
  if (props.match.params.source === "intern") {
    setData(() => data2?.questions || []);
    setIsloading(isLoading2);
    setIsError(isError2);
  }
}, [data1, data2]);

It works but I find that the code is redundant, and there is much boiterplate.

I would like to know if is possible to optimise it better and only return one {data, isLoading,IsError} object instead of having {data1, isLoading1,IsError1} and {data2, isLoading2,IsError2}

I very simple solution is to conditionally set the url.

But I would like to know it these is other ways

Here the queries should be triggered conditionally, and I think it's not the same package , I'm using : @tanstack/react-query — user3568611
– user3568611, Commented Nov 17, 2022 at 11:49
You overwrite the data in setData with each approach. Better to think about how to separate the two approaches instead of looking to combine queries, as they don't depend on each other. Look for suspend and lazy loading in react. — Tomas Vancoillie
– Tomas Vancoillie, Commented Nov 18, 2022 at 8:29

TkDodo · Accepted Answer · 2022-11-18 19:32:44Z

1

const { data, isLoading, isError } = useQuery({
  queryKey: ['test', props.match.params.language, props.match.params.difficulty],
  queryFn: () =>
    fetch(
      `${BASE_URL}${API_URLS.GET_QUIZ}/?languages=${props.match.params.language}&level=${props.match.params.difficulty}`
    ).then((response) => response.json())
});

if the props change, so will your query key, and it will trigger a new fetch.

answered Nov 18, 2022 at 19:32

TkDodo

30.4k5 gold badges85 silver badges101 bronze badges

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

2 Comments

OFRBG Over a year ago

Hey Tk, great work on TSQ. Is there an article explaining why the shift to using queryKey over parameters? This will require a lot of refactoring for some codebases.

TkDodo Over a year ago

if you are referring to the object syntax { queryKey, queryFn, ...options } over querykey, queryFn, options, please see remove overloads in the v5 roadmap: github.com/TanStack/query/discussions/4252 please also note that the syntax has always been valid, so you can migrate today, and there is even an eslint rule that is auto fixable that will migrate for you: tanstack.com/query/v4/docs/eslint/prefer-query-object-syntax

Collectives™ on Stack Overflow

How to improve this react-query multiple queries conditionally called code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related