The source code for this blog is available on GitHub.
Note
Top

React Query Usage

Cover Image for React Query Usage
Chen Han
Chen Han

Migrate from useEffect from react-query

const userId = session?.user?.id;
const customerAddresses = session?.user?.info?.addresses;

useEffect(() => {
  if (isEmpty(userId)) return;
  async function getAddresses() {

    const customerAddresses = (
      await httpService.get(`/api/bigCommerce/customers/${userId}`)
    )?.data?.addresses;
    setAddress(customerAddresses);
  }

  getAddresses();
}, [userId]);

I can just want to fetch data from next-auth. If there is no data from next-auth, i can fetch data by hittinh address api request

import { useQuery } from "react-query";

const userId = session?.user?.id;

async function getAddresses() {
  if(isEmpty(userId)) return;

  let result
  const customerAddresses = session?.user?.info?.addresses;
  if (isEmpty(customerAddresses)) {
    const { data: { addresses } } = await httpService.get(`/api/bigCommerce/customers/${userId}`)
    result = addresses
  } else {
    result = customerAddresses
  }

  setAddress(result);
  return result
}

useQuery({
  queryKey: ["customer", "addresses", userId],
  queryFn: getAddresses,
});
HYTE Logo

Topics

Support

Workshop

© 2024 WOOTHINK. All Rights Reserved.
Site MapTerms and ConditionsPrivacy PolicyCookie Policy