@drieam/api
Advanced tools
Redux api middleware that runs promises to fetch data from an api endpoint.
Install the @drieam/api and its dependencies.
yarn add @drieam/api @drieam/common
import * as api from '@drieam/api';
import { setStore } from '@drieam/common';
type API = {
user: models.canvas.user;
};
type Store = RootReducer<{
api: api.reducers.Connect<API>;
}>;
const api: ApiRoutes<API> = {
user: {
path: '/lti/proxy/api/v1/users/:id?',
mapper: models.canvas.User,
list: true,
options: {
onError,
}
},
};
const actions = api.actions.connect<API>(api);
const rootReducer = api.reducers.connect<API>(api);
const store = setStore(
api,
rootReducer,
[/** EMPTY MIDDLEWARES **/],
/** DefaultOptions **/,
)({
/* EMPTY INITIAL STATE */
});
Routing Structure is base of a key-value object where you can configure your basic reducer structure for use cases where you need to fetch data from Rest APIs. This structure is base on a type and a Hash object from that type.
The API type is a reference between your resource and the class used by the middleware to instantiate it.
apiRoute.path: PathtoRegExp | (params) => string
Turn a path string into a regular expression. (More info)
apiRoute.mapper: class | (data) => any;
The model class to be instantiated by the middleware. It can be a generic class or custom.
apiRoute.list: boolean | reducer;
As true sets the base ListState reducer but you can pass a custom reducer.
apiRoute.entity: boolean | reducer;
As true sets the base EntityState reducer but you can pass a custom reducer base on that one.
See More on ApiOptions
Note: Whether list or entity should be defined. If both are not defined or false, redux will complaint with an error.
const actions = api.actions.connect<API>(api);
Creates an object structure with all the redux actions needed for each resource definition.
actions.user.getRequest({ includes: 'users' });
Creates a request action depending of the filter properties:
actions.user.fetchEntity(1);
Creates an action to fetch an entity object.
actions.user.fetchList();
Creates an action to fech a collection of entities. This action refresh the data in the reducer.
actions.user.fetchPage({ page: 3});
Creates an action to fetch a page of a entity object collection. This page is added in the reducer.
actions.user.fetchNextPage();
// actions.user.fetchPage({ page: 'next' });
Creates an action to fetch the next page of a entity object collection.
actions.user.saveEntity(user);
Creates an action which saves or updates an entity object.
actions.user.deleteEntity(user);
Creates an action to delete an entity object.
actions.user.saveList([1, 2], user);
Creates an action which updates a collection of entity objects. The attributes can be one or many and it will be update per id position.
actions.user.deleteList([1, 3]);
Creates an action which delete a collection of entity objects.
Settings of an action.
{
rowKey: 'id',
csrfToken: null,
updateMethod: 'PUT',
credentials: 'same-origin',
nestedPayloadKeySuffix: 'Attributes',
headers: {},
onSuccess: undefined,
onError: undefined,
}
apiOptions.rowKey = string // by default is set
Row's unique key
apiOptions.csrfToken = string // by default is set
Cross-site request forgery token.
apiOptions.insert: string = 'prepend'
Order of insertion a listState. default: 'append'
apiOptions.updateMethod: string = 'PUT'
Set the default udate method to PUT or PATCH
apiOptions.credentials: omit | same-origin | include = 'same-origin'
Set the default udate method to PUT or PATCH
The request credentials you want to use for the request: omit, same-origin, or include. To automatically send cookies for the current domain, this option must be provided.
apiOptions.nestedPayloadKeySuffix: string = 'Attributes'
A string to transform the collection name before sending.
apiOptions.headers: object = {}
HTTP headers allow the client and the server to pass additional information with the request or the response. An HTTP header consists of its case-insensitive name.
apiOptions.form: 'redux-form' | null = 'redux-form'
Return a specific reduxForm SubmissionError on Error.
apiOptions.onSuccess: (data: T) => void;
Callback made by the middleware when a api call is successful.
apiOptions.onError: (error: ErrorResponse) => void;
Callback made by the middleware when an error occurs.
const apiReducers = api.reducers.connect<API>(api);
Creates an object structure with all the redux actions needed for each resource definition.
Redux Store of a collection of fetched entities.
{
pending: boolean = false // True if data is still being loaded for the first time.
fulfilled: boolean = false // True if data was loaded successfully.
rejected: boolean; = false // True if data was loaded unsuccessfully.
settled: boolean; = false // True if the data load completed, if successfully or unsuccessfully.
value: T[] | null = null // Value of successfully loaded data; otherwise, null.
reason: string; // Error of unsuccessfully loaded data; otherwise, null
errors: [{ // Error messages from the middleware or nothing
code: number // HTTP [status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes).
message: string // Error message.
errors: {} // Key-Values error messages.
}];
status: number; // Last Maximun HTTP [status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) from the ErrorMessages.
links: {
next?: { // The link relation for the immediate next page of results.
page: number,
url: srting,
},
last?: HeaderLink // The link relation for the last page of results.
first?:HeaderLink // The link relation for the first page of results.
prev?:HeaderLink // The link relation for the immediate previous page of results.
};
perPage: number; // The amount of item per page.
count: number; // The total number of available elements.
filters: QueryParams; // An object of the enabled filters.
}
Redux Store of a fetched entity.
{
pending: boolean = false // True if data is still being loaded for the first time.
fulfilled: boolean = false // True if data was loaded successfully.
rejected: boolean; = false // True if data was loaded unsuccessfully.
settled: boolean; = false // True if the data load completed, if successfully or unsuccessfully.
value: T | null = null // Value of successfully loaded data; otherwise, null.
reason: string = null // Error of unsuccessfully loaded data; otherwise, null
status: number = null // Last HTTP [status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes).
}
We welcome all contributors who abide by our Code of Conduct. Please see the Contributors Guide for more details on submitting a PR, setting up a local dev environment, running tests, etc...
Until this project reaches a 1.0 milestone, minor version numbers will simply be incremented during each release. The Changelog will continue to document the different types of updates, including any "breaking changes".
After the 1.0 milestone, this project will follow SemVer.
FAQs
Default Drieam api wrapper
The npm package @drieam/api receives a total of 3 weekly downloads. As such, @drieam/api popularity was classified as not popular.
We found that @drieam/api demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.