Package Exports

react-json-api-client

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-json-api-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-json-api-client

npm NPM

Simple package to execute api requests, Right now the package is in beta phase

Installation

yarn add react-json-api-client
# or
npm i -s react-json-api-client

Todo

Api client context
Api hooks: useGet, usePost, usePatch, useDelete, usePut
Replace params in url
Api configuration hook
Allow render Requests log
Allow authentication (JWT)
Support for filters in url following the JSON Spect
Add JSON API schemas
Support for related records in url following the JSON Spect

Usage

App.jsx

<ApiClient
    config={{
        endpoints: {
            auth: '/api/v1/my-auth-endpoint',
            nested: {
                foo: '/api/v1/bar'
                withReplace: '/api/v1/user/🆔'
            },
            
        },
        server: 'http://my-server.test'
    }}
>
    {... my app components}
</ApiClient>

MyComponent.jsx

import { useGet, usePost } from 'react-json-api-client'

const MyComponent: React.FC = () => {
    // First position = Promise to execute the request
    // Second position = Boolean with the loading state
    const [sendPost, sending] = usePost('nested.foo')
    // The usePatch, usePut, useDelete works the same way

    // const [sendPost, loading] = usePatch('auth')
    // data: The response data when the request is done
    // loading, boolean with the loading state
    const {data, loading} = useGet('nested.withReplace', {
        id: 2
    })
    
    // useGet can be lazy, just send the lazy flag after the configs
    const [sendRequest, loading] = useGet('path', {}, true)

    const handleAuth = async () => {
        try {
            const response = await sendPost({
                // The body
                data: {
                    email: 'my-email@gmail.com',
                    password: '1234567'
                }   
            })
            console.log(response.data)
        } catch (e) {
            // handle your error
        }
    }
    return (
        <>
        </>
    )
}