#React Services

[TOCM]

[TOC]

Configuration

Original react-query resources can be accessed from @hellopearl/react-services.

import {
  QueryClient,
  QueryClientProvider,
  ReactQueryDevtools,
} from '@hellopearl/react-services';

const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App user={user} />
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>,
  document.getElementById('root')
);

Service Initialization

import { PMSService } from '@hellopearl/react-services';

const PMSService = new PMSService();

PMSService.initialize(options, getToken, interceptors, defaultQueryConfig);

####Description

| Parameters | Description | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | | options | Axios options, (documentation). | | getToken | Method that returns a promise with the token which will be added in the request headers. headers['Authorization'] = 'Bearer ${token}' . | | interceptors | Object with the attributes successRequestInterceptor, errorRequestInterceptor, successResponseInterceptor and errorResponseInterceptor. | | defaultQueryConfig | Default react-query config, (documentation). |

Use hooks

const { data, ... } = PMSService.Office.list(
  data,
  queryConfig
);

####Description

| Parameters | Description | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | data | Axios options, see more in (documentation). | | queryConfig | Method that returns a promise with the token which will be added in the request headers. headers['Authorization'] = 'Bearer ${token}' . |

Customize Services

- Create Service

To create a custom service you will need to extend BaseService and add the entities and methods in the following way.

import { BaseService, DEFAULT_SERVICE_CONFIG } from '@hellopearl/react-services';
import useList from './entity.list';

class CustomService extends BaseService {
  ENTITY_URL = `${BaseService.baseURL}/entity`;

  defaultServiceConfig = DEFAULT_SERVICE_CONFIG;

  Entity = {
    list: useList.bind(this),
    ...
  };

}

export default new CustomService();

- Add Entity

To add a new Entity, you can use the addEntity method. You can also set the initial methods by passing an object as a second parameter.

PMSService.addEntity("NewEntity, {
   method1(){...},
   method2(){...},
   ...
})

- Replace Entity

To replace a whole Entity, you can use the replaceEntity method.

PMSService.addEntity("NewEntity, {
   method1(){...},
   method2(){...},
   ...
})

- Add Endpoints

In case you want to add methods to an existing Entity, you can use the addEndpoints method.

PMSService.addEndpoints("NewEntity, {
   method1(){...},
   method2(){...},
   ...
})

Note: Do not edit entities or methods directly, you must use the provided methods since they bind data accessed from the context of each service.

- Endpoint method structure

We highly recommend to create the method in the following way:

import { useGet } from '@hellopearl/react-services';
...

// Original HTTP call method
const listOffices = (service, { organization, limit = 500 }) => {
  return service.client.get(`${service.OFFICE_URL}/${organization}`, {
    params: { limit },
  });
};

// Wrapper to be used as a hook
function useListOffices(data, queryConfig) {
  return useGet.bind(this)(
    ['listOffices', data],
    listOffices,
    data,
    queryConfig
  );
}

// Add the method we just created
Service.addEndpoints('Entity', {
  list: useListOffices,
});