0.0.3 • Published 2 years ago
test-test-services v0.0.3
#React Services
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,
});