Question 74048 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Using conditions in custom react hook which uses useQuery – Reactjs

I have a custom react hook which is used to get a user’s data by sending a POST request. I would like my custom react hook to check if the argument passed into the hook meets certain conditions, however I’m aware that I cant use conditions with hooks. Does any one have any idea how to improve my code so that I can check if an argument is valid?

...
import { useQuery } from "@tanstack/react-query";

export const useLiquidityPositions = (userAddress: string): GraphQLResponse<LiquidityPositions> => {
    const {
        status: status,
        isLoading: loading,
        error: error,
        data: response,
    } = useQuery({
        queryKey: ["USER_POSITIONS", userAddress],
        queryFn: async () => {
            if (!isAddress(userAddress)) {
                return undefined
            }
            const res = await getLiquidityPositionsData(userAddress);
            return res;
    }});
    const payload = response?.data;

    return { status, loading, error, response, payload }
}
Tags:

2

Answers


  1. 0

    You can enable or disable useQuery by your condition

    like this :

    export const useLiquidityPositions = (
  userAddress: string,
  enabled: boolean
): GraphQLResponse<LiquidityPositions> => {
  const {
    status: status,
    isLoading: loading,
    error: error,
    data: response,
  } = useQuery({
    queryKey: ['USER_POSITIONS', userAddress],
    queryFn: async () => {
      if (!isAddress(userAddress)) {
        return undefined;
      }
      const res = await getLiquidityPositionsData(userAddress);
      return res;
    },
    enabled,
  });
  const payload = response?.data;

  return { status, loading, error, response, payload };
};

    and in usage:

    const result = useLiquidityPositions('...',true //your condition )
    Login or Signup to reply.
  2. 0

    Two ways to validate query using react-query.

    1. only validate a single request. https://react-query-v3.tanstack.com/guides/dependent-queries

    import { useQuery } from "@tanstack/react-query";

export const useLiquidityPositions = (userAddress: string): GraphQLResponse<LiquidityPositions> => {
    const {
        status: status,
        isLoading: loading,
        error: error,
        data: response,
    } = useQuery({
        queryKey: ["USER_POSITIONS", userAddress],
        queryFn: ()=>getLiquidityPositionsData(userAddress),
          // The query will not execute until isAddress(userAddress) is true.
        enabled: isAddress(userAddress)
        });
    const payload = response?.data;

    return { status, loading, error, response, payload }
}

    2. validate all request.
    https://react-query-v3.tanstack.com/guides/query-invalidation

    Add validate functions to queryClient

    
const queryClient = new QueryClient()
queryClient.invalidateQueries({
  predicate: query =>
    query.queryKey[0] === 'USER_POSITIONS' && isAddress(query.queryKey[1]) ,
})

<QueryClientProvider client={queryClient}>
</QueryClientProvider>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search