How to integrate API in reactJS

I have an API as follows,

http:test.com/api/v1/getPriorityById/{priorityId}

useEndpointData ,

export const useEndpointData = <TPath extends PathFor<'GET'>>(
    endpoint: TPath,  params?: OperationParams<'GET', MatchPathPattern<TPath>>,
    initialValue?:
    | Serialized<OperationResult<'GET', MatchPathPattern<TPath>>>
    | (() => Serialized<OperationResult<'GET', MatchPathPattern<TPath>>>),
    ): AsyncState<Serialized<OperationResult<'GET', MatchPathPattern<TPath>>>> & {
    reload: () => void;
} => {
    deprecationWarning({ endpoint, params, initialValue });
    const { resolve, reject, reset, ...state } = useAsyncState(initialValue);
    const dispatchToastMessage = useToastMessageDispatch();
    const getData = useEndpoint('GET', endpoint);

const fetchData = useCallback(() => {
    reset();
    getData(params as any)
        .then(resolve)
        .catch((error) => {
            console.error(error);
            dispatchToastMessage({
                type: 'error',
                message: error,
            });
            reject(error);
        });
}, [reset, getData, params, resolve, dispatchToastMessage, reject]);

useEffect(() => {
    fetchData();
}, [fetchData]);

  return {
    ...state,
    reload: fetchData,
  };
};

I integrated in UI as follows,

    const value = useEndpointData(`/v1/getPriorityById//${priorityId}`);

Here the prob is I will have priorityId as undefined sometimes, due to which the above api throwing 404 errors repeatedly when priority is undefined. Can any one please suggest me how to restrict calling the api when priorityId is undefined.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/RkNJDA2