Help and guidance asked for optimizing TanStack-Query usage with dynamic queries

[bartschriever]

Hi All!

I'm really enjoying using tanstack-query in our frontends. Currently, I find myself occasionally struggling to determine the correct approach for utilizing tanstack-query. I'll provide an example below and hope that the community and/or the tanstack team can provide feedback or suggest a better direction.

I am building a new widget that allows customers to select a package pickup point for their deliveries instead of having them delivered to their homes. Within this Pickup Point (PUP) widget, we have a list of PUPs and a Google Maps overview, utilizing the Google Maps API, displaying all the markers indicating the locations of those PUPs. To better understand what I'm building, please refer to this screenshot of the already-built frontend.

First, we have a query that retrieves addresses from the customer's address book. In this address book, the customer has a default shipping address.

export default function useGetCustomerAddressesQuery() {
  const { isUserLoggedIn } = useAuthentication();

  return useQuery<GetAddressesResponseData>({
    queryKey: ['addresses'],
    queryFn: async () => {
      const { data } = await addressHttpClient.getAddresses();
      return data;
    },
    enabled: isUserLoggedIn,
  }, implementationProvider.queryClient);
}

We take this default shipping address and pass it to the Google Maps Geocoding API to obtain the longitude and latitude of this address.

export default function PickupPointWidgetList() {
  const customerAddressesQuery = useGetCustomerAddressesQuery();
  const customerGeoArea = getRelevantPupGeoAreaForCustomer(customerAddressesQuery.data)
  const geocodingLibrary = useMapsLibrary('geocoding');

  const [geocodingService, setGeocodingService] = useState < google.maps.Geocoder | null > (null);
  const [position, setPosition] = useState < google.maps.LatLng > ();

  useEffect(() => {
    if (geocodingLibrary) {
      setGeocodingService(new geocodingLibrary.Geocoder());
    }
  }, [geocodingLibrary]);

  useEffect(() => {
    if (geocodingService) {
      geocodingService.geocode({
        componentRestrictions: {
          country: customerGeoArea.countryCode,
          postalCode: customerGeoArea.postalCode,
        },
      }).then((response) => {
        setPosition(response.results[0].geometry.location);
      });
    }
  }, [geocodingService]);

  return (
    <PickupPointPanel customerPosition={position} />
  );

We need the longitude and latitude to retrieve all the pickup points in a radius from this address when the customer opens the widget for the first time. This is because most customers use a PUP when they are not at home during a package delivery, and they prefer it to be delivered close to their home so they can pick it up after work.

Next, we move on to the next query, retrieving all the PUPs.

export default function useGetPickupPointsQuery({ longitude, latitude }: Props) {
  const { isUserLoggedIn } = useAuthentication();

  return useQuery<GetPickupPointsResponseData>({
    queryKey: ['get-pickup-points'],
    queryFn: async () => {
      const { data } = await pickupPointHttpClient.pickupPointSearch({
        geoArea: {
          longitude,
          latitude,
          radius: 15,
        },
      });
      return data;
    },
    enabled: isUserLoggedIn,
  }, implementationProvider.queryClient);
}

My first question would be: should you execute the useGetCustomerAddressesQuery, get the default shipping address, pass it to the Google Maps Geocoding API to get the longitude and latitude and pass those values to the useGetPickupPointsQuery as props or do we execute this piece of code inside the useGetPickupPointsQuery?

Let's make it a bit more complex. We also have a search bar where people can enter a different address, as we only show the PUPs in a radius of 15 kilometers around the default shipping address. We first fetch the longitude and latitude of this entered address using the Google Maps Places API. Once we have those values, we need to use them with useGetPickupPointsQuery to fetch the new PUPs in another area in the entered city, state, or country.

I'm not completely sure how I'm going to tackle this problem and hope you guys can help me out a little! If you need more information, please let me know.

Thanks in advance!
Bart

[TkDodo]

My first question would be: should you execute the useGetCustomerAddressesQuery, get the default shipping address, pass it to the Google Maps Geocoding API to get the longitude and latitude and pass those values to the useGetPickupPointsQuery as props or do we execute this piece of code inside the useGetPickupPointsQuery?

passing like you do it seems fine. Please just make sure that longitude and latitude are part of the queryKey for useGetPickupPointsQuery.

Let's make it a bit more complex.

still the same. define dependencies in the key (long, lat) correctly and it should work out of the box.