React-query-pro NPM

React Query Pro

Make asynchronous requests and manage data with ease using the patterns you are already familiar with 🔥😄🔥

Install

npm install --save react-query-pro

yarn add react-query-pro

Usage

React query pro exposes two hooks useGetQuery and useQuery, a Query component, and a makeRequest function, all for handling and managing asynchronous request and data

useGetQuery

useGetQuery is used for fetching data by making a GET Request

import React from 'react'
import { useGetQuery } from 'react-query-pro'

export const UseGetQueryExample = () => {
  const { isLoading, data, error, retry } = useGetQuery({
    url: 'http://localhost:3000/posts/1',
    method: 'GET'
  })

  if (isLoading) return <p>loading...</p>

  if (error)
    return (
      <div>
        <p>An unexpected error occurred {error.message}</p>

        <button onClick={retry}>retry</button>
      </div>
    )

  return (
    <div>
      <p>author: {data.author.name}</p>
      <p>message: {data.message}</p>
    </div>
  )
}

export default UseGetQueryExample

useQuery

The useQuery is a special hook for performing any form of CRUD operation. It returns functions createQuery for triggering such requests

import React from 'react'
import { useQuery } from 'react-query-pro'

const UseQueryExample = () => {
  const { createQuery, isLoading, error, data } = useQuery({
    method: 'POST',
    url: 'http://localhost:3000/users/login'
  })

  const handleSubmit = async () => {
    try {
      const body = {
        // body of the request, in this case email and password for login
        email: 'johndoe@gmail.com',
        password: '12345'
      }

      const data = await createQuery(body)

      console.log({ data })
    } catch (error) {
      console.log({ error })
    }
  }

  return <button onClick={handleSubmit}>Send</button>
}

export default UseQueryExample

Query

The Query component uses the render prop pattern for managing asynchronous request. It is best used when making multiple request in a single component.

import React from 'react'
import { Query } from 'react-query-pro'

const QueryExample = () => {
  return (
    // For getting stories
    <Query url='http://localhost:3000/stories' method='GET'>
      {({ isLoading, error, data, retry }) => {
        if (isLoading) return <p>Fetching stories...</p>

        if (error)
          return (
            <>
              <p>An unexpected error occurred {error.message}</p>

              <button onClick={retry}>retry</button>
            </>
          )

        return <pre>{JSON.stringify(data)}</pre>
      }}
    </Query>

    // For getting posts
    <Query url='http://localhost:3000/posts' method='GET'>
      {({ isLoading, error, data, retry }) => {
        if (isLoading) return <p>Fetching user...</p>

        if (error)
          return (
            <>
              <p>An unexpected error occurred {error.message}</p>

              <button onClick={retry}>retry</button>
            </>
          )

        return <pre>{JSON.stringify(data)}</pre>
      }}
    </Query>
  )
}

export const QueryExample

makeRequest

Don't want to use hooks or the Query component? makeRequest is here for you 😃

import React from 'react'
const MakeRequestExample = () => {
import { makeRequest } from 'react-query-pro'

const MakeRequestExample = () => {
  const handleSubmit = async () => {
    try {
      const response = await makeRequest({
        method: 'POST',
        url: 'http://localhost:3000/posts',
        data: {
          post: 'Hello world'
        }
      })

      console.log({ response })
    } catch (error) {
      console.log({ error })
    }
  }

  return <button onClick={handleSubmit}>Post</button>
}

export default MakeRequestExample