Skip to content

useAuthorize hook throws React Query error when region: false - getRegion returns undefined #1584

@0xjcf

Description

@0xjcf

🐛 Bug report

Current Behavior

The useAuthorize hook throws a React Query error when region: false is passed as a parameter:

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["region"]

This causes the application to crash or behave unexpectedly when trying to use authorization with region: false.

Expected behavior

The useAuthorize hook should work correctly when region: false is passed, without throwing React Query errors.

Reproducible example

import { useAuthorize } from '@availity/authorize';

const MyComponent = () => {
  const { authorized, isLoading } = useAuthorize(['7214'], { region: false });
  
  if (isLoading) return <div>Loading...</div>;
  return authorized ? <div>Authorized</div> : <div>Not authorized</div>;
};

Suggested solution(s)

The root cause is in the getRegion function in src/api.ts which returns undefined when region is false:

export const getRegion = async (region?: boolean | string): Promise<string | undefined> => {
  if (region === true) {
    const resp = await avRegionsApi.getCurrentRegion();
    return resp?.data?.regions?.[0]?.id;
  }
  return region || undefined; // This returns undefined when region is false
};

Fix: Change the return type and value to use null instead of undefined:

export const getRegion = async (region?: boolean | string): Promise<string | null> => {
  if (region === true) {
    const resp = await avRegionsApi.getCurrentRegion();
    return resp?.data?.regions?.[0]?.id || null;
  }
  return region || null; // Return null instead of undefined
};

Additional context

React Query requires all query functions to return a value other than undefined. This is a simple one-line fix that ensures compatibility with React Query's requirements.

Your environment

npx envinfo --npmPackages '@availity/*' --binaries

  Binaries:
    Node: 20.15.1 - ~/.local/state/fnm_multishells/97531_1750191320046/bin/node
    Yarn: 4.5.1 - ~/.local/state/fnm_multishells/97531_1750191320046/bin/yarn
    npm: 10.7.0 - ~/.local/state/fnm_multishells/97531_1750191320046/bin/npm
  npmPackages:
    @availity/api-axios: ^11.0.0 => 11.1.0 
    @availity/api-core: ^11.0.0 => 11.0.0 
    @availity/authorize: ^5.0.0 => 5.0.0 
    @availity/env-var: ^5.0.0 => 5.0.0 
    @availity/favorites: ^5.1.4 => 5.1.4 
    @availity/form: ^1.10.3 => 1.10.3 
    @availity/icon: ^0.11.10 => 0.11.10 
    @availity/link: ^2.6.2 => 2.6.2 
    @availity/localstorage-core: ^3.0.0 => 3.0.0 
    @availity/page-header: ^14.0.16 => 14.0.16 
    @availity/spaces: ^8.0.19 => 8.0.19 
    @availity/workflow: ^12.2.0 => 12.2.0 
    @availity/yup: ^7.0.0 => 7.0.0 

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions