query-hook

React hook used to make API calls

Package version NPM JavaScript Style Guide

Install

npm install --save query-hook

Usage

JavaScript

import { useQuery, Status } from 'query-hook';

const Component = () => {
  const usersQuery = useQuery();

  useEffect(() => {
    switch (usersQuery.status) {
      case Status.INIT:
        usersQuery.get('https://api.example.com/users');
        break;
      case Status.SUCCESS:
        console.log('Fetched users :', usersQuery.response.users);
        break;
      case Status.ERROR:
        console.error('Unable to fetch users :', usersQuery.errorResponse.errors);
        break;
    }
  }, [usersQuery.status]);

  return (
    <div>
      {usersQuery?.response.users.map(user => user.name)}
    </div>
  )
}

TypeScript

import { FC } from 'react';

import { useQuery, Status, ErrorData, Response, ErrorResponse } from 'query-hook';

// Custom error data (optional)
interface CustomErrorData extends ErrorData {
  error: 'access_denied' | 'unauthorized' | 'not_found';
}

// Custom response (optional)
interface UsersResponse extends Response {
  users: [{
    email: string;
    name: string;
  }];
}

// Custom error response with custom error data (optional)
interface CustomErrorResponse extends ErrorResponse {
  errors: CustomErrorData[];
}

const Component: FC = () => {
  const usersQuery = useQuery<UsersResponse, CustomErrorResponse>();

  useEffect(() => {
    switch (usersQuery.status) {
      case Status.INIT:
        usersQuery.get('https://api.example.com/users');
        break;
      case Status.SUCCESS:
        console.log('Fetched users :', usersQuery.response.users);
        break;
      case Status.ERROR:
        console.error('Unable to fetch users :', usersQuery.errorResponse.errors);
        break;
    }
  }, [usersQuery.status]);

  return (
    <div>
      {usersQuery?.response.users.map(user => user.name)}
    </div>
  )
}

License

MIT © Lelberto

This hook is created using create-react-hook.

GitHub

View Github