Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Features

• Transport and protocol agnostic data fetching
• Request deduplication
• Local mutation
• Pagination
• TypeScript ready
• Network status
• Refetch queries upon successful mutation

Table of Contents

• Installation
• AjaxProvider Props
  • children
  • api
  • stores
  • initialState
  • persistOn
• AjaxQuery Props
  • endpoint
  • type
  • headers
  • variables
  • store
  • dataPath
  • errorPath
  • mergeData
• AjaxQuery Render Props
• AjaxMutation Props
• AjaxMutation Render Props
• useUpdate Hook
• Examples

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm i @tpr/ajax

This package also depends on react and react-dom. Please make sure you have those installed as well.

Testing

Run following command from the root of the project and follow the instructions.

yarn test:watch

AjaxProvider Props

children

JSX.Element required

api

Endpoint[] required

Accepts objects of type Endpoint, at least one is required. First Endpoint will be the default.

Endpoint = {
	name: string;
	instance: Observable
}

stores

Store[] required

Accepts a configuration of stores where the data will be persisted.

Store = {
	name: string;
	persist?: boolean
}

initialState

{} optional

Use initialState to rehydrate the store from the localStorage

persistOn

string: optional

If store is persisted, it will be persisted on this key in the localStorage

AjaxQuery, useQuery Props

endpoint

string required

type

'get' | 'post' optional

headers

object optional

variables

object optional

store

string required

Store name from the global store object that was defined in the Provider.

dataPath

'string[]' optional

Define path to the data that comes back from the network request to be extracted.

errorPath

'string[]' optional

Define path to the error that comes back from the server from network request.

mergeData

(first: any, second: any) => [...first, ...second] optional

Provide a method to merge data for fetchMore function

AjaxQuery, useQuery Render Props

TODO: ...

AjaxMutation, useMutation Props

TODO: ...

AjaxMutation, useMutation Render Props

TODO: ...

useUpdate Props

This hook provides a way to interact with one of available stores. Can be used for optimistic updates or update the state whenever it is appropriate todo so.

useUpdate(args: UpdateProps): (search?: string | null, options: FindAndModifyProps) => void

Examples

NOTE: all examples will be hosted on the codesandbox

• useQuery
• useMutation
• useUpdate