plain-purple

Make another fetch call if the first one returns no data.

I'm making a fetch call to out backend API with data of the location of the user. Either 1. We get results and show them to the user "Here are some results within your area" or 2. There are no results within the location the user specified. If 2, there are no results, but the fetch was successful. We want to make another fetch call, this time with specified location data to show the user "There was no results within your specified area, but here is some results outside of your area" How do we do this in the best practice way with react-query? Do I have to make two calls and have my own statehooks and useEffect, and then have different renders? I just wanna render DATA, regardless if it is from fetch call 1, or fetch call 2. And them maybe just have a boolean sayuing if it was fetch 1 or fetch 2. I am using useInfiniteQuery btw, but I'm sure it doesn't matter.

11 Replies

other-emerald•2y ago

Use the enabled flag on query 2

plain-purpleOP•2y ago

Thanks, and what should trigger query 2? Something like (data.products.length === 0)? the other problem I have with this is that there will be two different objects to render right? data from query 1, and data from query 2. So I need to have two identical data.map return JSX statements? Because both query 1 and query 2 will fetch the same types to show to the user. I'm using all these:

const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data }

const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data }

So I have to write dublicate code to handle everything? Doesn't seem to be the best approach here. Or?

  const { userGeoData } = useUserGeoData();
  const [expandedSearch, setExpandedSearch] = useState<boolean>(false);

  const fetchProducers = async ({ pageParam }: { pageParam: number }) => {
    setExpandedSearch(false);
    if (userGeoData?.latitude != null && userGeoData?.longitude != null) {
      const res = await ApiClient.producer.producerListNearby(
        expandedSearch ? 62.6323 : userGeoData?.latitude,
        expandedSearch ? 17.9409 : userGeoData?.longitude,
        query,
        pageParam,
        perpage,
        expandedSearch ? 500 : filter.distance
      );
      if (res.producers.length === 0) {
        setExpandedSearch(true);
      }
      return res;
    }
  };

  const filter = { distance: userGeoData?.distance || 100, categories: [], showUnavailable: true };
  const query = undefined;

  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data } =
    useInfiniteQuery({
      queryKey: ["NearbyProducers", userGeoData, expandedSearch],
      queryFn: fetchProducers,
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage?.nextPage,
    });

  function getProducersFromPages(pages: (PageResult | undefined)[] | undefined) {
    if (!pages) return [];

    return pages.flatMap((page) => (page ? page.producers : []));
  }

  const { userGeoData } = useUserGeoData();
  const [expandedSearch, setExpandedSearch] = useState<boolean>(false);

  const fetchProducers = async ({ pageParam }: { pageParam: number }) => {
    setExpandedSearch(false);
    if (userGeoData?.latitude != null && userGeoData?.longitude != null) {
      const res = await ApiClient.producer.producerListNearby(
        expandedSearch ? 62.6323 : userGeoData?.latitude,
        expandedSearch ? 17.9409 : userGeoData?.longitude,
        query,
        pageParam,
        perpage,
        expandedSearch ? 500 : filter.distance
      );
      if (res.producers.length === 0) {
        setExpandedSearch(true);
      }
      return res;
    }
  };

  const filter = { distance: userGeoData?.distance || 100, categories: [], showUnavailable: true };
  const query = undefined;

  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data } =
    useInfiniteQuery({
      queryKey: ["NearbyProducers", userGeoData, expandedSearch],
      queryFn: fetchProducers,
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage?.nextPage,
    });

  function getProducersFromPages(pages: (PageResult | undefined)[] | undefined) {
    if (!pages) return [];

    return pages.flatMap((page) => (page ? page.producers : []));
  }

This is how I solved it, is it legit? Seems to be working fine.

other-emerald•2y ago

how to stop code duplication: const data = data1?.length===0 ? data2 : data1 There are more solutions e.g. combining this logic in a queryFn I don’t like the state. It is unnecessary as it can be easily derived

plain-purpleOP•2y ago

const data = data1?.length===0 ? data2 : data1 This data is changed every time data1 or data2 is changing? This is what I don't get. I though it was only state variables that reacted in this way. I mean it is not just data. It is all these: { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data }

other-emerald•2y ago

Then don’t only swap data, swap the whole query

plain-purpleOP•2y ago

I'm sorry can you answer the question I asked above also? I don't understand I though only statehooks reacted and changed dynamically. Can you give me a quick example of how to do this? Do you mean having this: const data = data1?.length===0 ? data2 : data1 For every variable in the query? And also, where should those be placed? In the second fetch function? I'm so grateful for the help sir.

other-emerald•2y ago

const query1 = useQuery(...)
const query2 = useQuery({...,enabled:query1.data?.length===0})
const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data } = useMemo(()=> query1.data?.length===0 ? query2 : query1, [query1, query2])

const query1 = useQuery(...)
const query2 = useQuery({...,enabled:query1.data?.length===0})
const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data } = useMemo(()=> query1.data?.length===0 ? query2 : query1, [query1, query2])

robust-apricot•2y ago

Why not just conditionally call the endpoint within useQuery, based on query parameter, or local state? Example:

const {expanded_search} = router.query
useQuery({queryFn: expanded_search ? endpoint1 : endpoint2})

const {expanded_search} = router.query
useQuery({queryFn: expanded_search ? endpoint1 : endpoint2})

plain-purpleOP•2y ago

Because we need to run the first query to know if we need to run the second query. The second query needs to be run when the first query doesnt find anything. So the first query will always run first. If no hits, the second needs to run, to give the user "Some data outside of his search". The API takes in coordinates. You need to know that I'm novice at react, just learning. So it's very nice of you to tell me what is not good practice, and what is. I really appreciate it. My code from above is working. but its probably not optimal. I don't wanna do something that might be a problem later. Im not used to using useMemo for example. Or useCallback. I need to learn when they are needed.

robust-apricot•2y ago

The query param could also be pushed only if the first result is falsely, Example:

if( isSuccess && data.length === 0) {
//Pushing query param here
}

if( isSuccess && data.length === 0) {
//Pushing query param here
}

plain-purpleOP•2y ago

Still need to make two different queries right?

  const { userGeoData } = useUserGeoData();
  const [expandedSearch, setExpandedSearch] = useState<boolean>(false);

  const fetchProducers = async ({ pageParam }: { pageParam: number }) => {
    setExpandedSearch(false);
    if (userGeoData?.latitude != null && userGeoData?.longitude != null) {
      const res = await ApiClient.producer.producerListNearby(
        expandedSearch ? 62.6323 : userGeoData?.latitude,
        expandedSearch ? 17.9409 : userGeoData?.longitude,
        query,
        pageParam,
        perpage,
        expandedSearch ? 500 : filter.distance
      );
      if (res.producers.length === 0) {
        setExpandedSearch(true);
        return;
      }
      return res;
    }
  };

  const filter = { distance: userGeoData?.distance || 100, categories: [], showUnavailable: true };
  const query = undefined;

  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data } =
    useInfiniteQuery({
      queryKey: ["NearbyProducers", userGeoData, expandedSearch],
      queryFn: fetchProducers,
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage?.nextPage,
    });

  function getProducersFromPages(pages: (PageResult | undefined)[] | undefined) {
    if (!pages) return [];

    return pages.flatMap((page) => (page ? page.producers : []));
  }

  const { userGeoData } = useUserGeoData();
  const [expandedSearch, setExpandedSearch] = useState<boolean>(false);

  const fetchProducers = async ({ pageParam }: { pageParam: number }) => {
    setExpandedSearch(false);
    if (userGeoData?.latitude != null && userGeoData?.longitude != null) {
      const res = await ApiClient.producer.producerListNearby(
        expandedSearch ? 62.6323 : userGeoData?.latitude,
        expandedSearch ? 17.9409 : userGeoData?.longitude,
        query,
        pageParam,
        perpage,
        expandedSearch ? 500 : filter.distance
      );
      if (res.producers.length === 0) {
        setExpandedSearch(true);
        return;
      }
      return res;
    }
  };

  const filter = { distance: userGeoData?.distance || 100, categories: [], showUnavailable: true };
  const query = undefined;

  const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, status, error, data } =
    useInfiniteQuery({
      queryKey: ["NearbyProducers", userGeoData, expandedSearch],
      queryFn: fetchProducers,
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage?.nextPage,
    });

  function getProducersFromPages(pages: (PageResult | undefined)[] | undefined) {
    if (!pages) return [];

    return pages.flatMap((page) => (page ? page.producers : []));
  }

What is the biggest problem with this? I changed it a bit. So it doesnt return anything if it didnt get any results.

Gaming

Programming

Make another fetch call if the first one returns no data.

Did you find this page helpful?