# fluxible-plugin-fetchr

> A plugin for Fluxible applications to provide an isomorphic interface for RESTful services

Latest version **0.5.1** (published 2021-11-16) · 0 weekly downloads

## Install

```sh
npm install fluxible-plugin-fetchr
pnpm add fluxible-plugin-fetchr
yarn add fluxible-plugin-fetchr
bun add fluxible-plugin-fetchr
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2021-11-16 |
| First published | 2014-11-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1795 |
| Author | Michael Ridgway |
| Maintainers | mridgway, snyamathi, lingyan, redonkulus, kfay |
| Keywords | yahoo, flux, react, fluxible, fetchr, rest |

## Links

- npm: https://www.npmjs.com/package/fluxible-plugin-fetchr
- Repository: https://github.com/yahoo/fluxible
- Homepage: https://github.com/yahoo/fluxible#readme
- Issues: https://github.com/yahoo/fluxible/issues
- npm.io page: https://npm.io/package/fluxible-plugin-fetchr

## Dependencies (1)

- [fetchr](https://npm.io/package/fetchr.md) ^0.7.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.1 (latest) — 2021-11-16
- 0.5.0 — 2021-09-29
- 0.4.0 — 2021-07-19
- 0.3.12 — 2021-06-21
- 0.3.11 — 2016-08-01
- 0.3.10 — 2016-06-29
- 0.3.9 — 2015-12-03
- 0.3.8 — 2015-09-25
- 0.3.7 — 2015-09-02
- 0.3.6 — 2015-08-10
- 0.3.5 — 2015-08-10
- 0.3.4 — 2015-07-09
- 0.3.3 — 2015-06-16
- 0.3.1 — 2015-06-02
- 0.2.4 — 2015-06-02
- … 8 more at https://npm.io/package/fluxible-plugin-fetchr/versions

## README

# Fetchr Plugin for Fluxible

[![npm version](https://badge.fury.io/js/fluxible-plugin-fetchr.svg)](http://badge.fury.io/js/fluxible-plugin-fetchr)

Provides isomorphic RESTful service access to your [Fluxible](https://github.com/yahoo/fluxible) application using [fetchr](https://github.com/yahoo/fetchr).

## Usage

```js
import Fluxible from 'fluxible';
import fetchrPlugin from 'fluxible-plugin-fetchr';
const app = new Fluxible();

app.plug(fetchrPlugin({
    xhrPath: '/api' // Path for XHR to be served from
}));
```

Now, when calling the `createContext` method on the server, make sure to send in the request object and optionally pass an `xhrContext` which will be used as parameters for all XHR calls:

```js
app.createContext({
    req: req,
    xhrContext: { // Used as query params for all XHR calls
        lang: 'en-US', // make sure XHR calls receive the same lang as the initial request
        _csrf: 'a3fc2d' // CSRF token to validate on the server using your favorite library
    }
});
```

### Registering Your Services

*Registering fetchr services is done on the server side*.  Since the fetchr plugin is in control of the `fetchr` class, we expose this through the `registerService` method.

```js
pluginInstance.registerService(yourService);
```

Or if you need to do this from your application without direct access to the plugin

```js
app.getPlugin('FetchrPlugin').registerService(yourService);
```

For real examples, you can check out [the `server.js` file in our chat example](https://github.com/yahoo/fluxible/blob/master/examples/chat/server.js).

### Exposing Your Services

Fetchr also contains an express/connect middleware that can be used as your access point from the client.
Fetchr middleware expects that you're using the [`body-parser`](https://github.com/expressjs/body-parser) middleware (or an alternative middleware that populates `req.body`) before you use Fetchr middleware.

```js
const server = express();
// you need to use body parser middleware before `FetchrPlugin`
server.use(bodyParser.json());
server.use(pluginInstance.getXhrPath(), pluginInstance.getMiddleware());
```

For real examples, you can check out [the `server.js` file in our chat example](https://github.com/yahoo/fluxible/blob/master/examples/chat/server.js).

### Dynamic XHR Paths

The `fetchrPlugin` method can also be passed a `getXhrPath` function that returns the string for the `xhrPath`. This allows you to dynamically set the `xhrPath` based on the current context. For instance, if you're hosting multiple sites and want to serve XHR via a pattern route like `/:site/api`, you can do the following:

```js
app.plug(fetchrPlugin({
    getXhrPath: function (contextOptions) {
        // `contextOptions` is the object passed to `createContext` above
        return contextOptions.req.params.site + '/api';
    }
}));
```

## CORS Support

Fetchr provides [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) support by allowing you to pass the full origin host into `corsPath`.

For example:

```js
import Fluxible from 'fluxible';
import fetchrPlugin from 'fluxible-plugin-fetchr';
const app = new Fluxible();

app.plug(fetchrPlugin({
    corsPath: 'http://www.foo.com',
    xhrPath: '/fooProxy'
}));
```

[See Fetchr docs for more info](https://github.com/yahoo/fetchr/blob/master/README.md#cors-support)

## Context Variables

By Default, fetchr appends all context values to the xhr url as query params. `contextPicker` allows you to greater control over which context variables get sent as query params depending on the xhr method (GET or POST) [See Fetchr docs for more info](https://github.com/yahoo/fetchr/blob/master/README.md#context-variables)

## Stats Monitoring & Analysis

To collect fetcher service's success/failure/latency stats, you can configure `statsCollector` for `FetchrPlugin`.  The `statsCollector` function will be invoked with two arguments: `actionContext` and `stats`:

* **actionContext:**  This is the [action context](http://fluxible.io/api/actions.html#action-context) object provided by [Fluxible](http://fluxible.io/).
* **stats:**  This object contains all stats data for each service CRUD request. [See Fetchr docs for more info about provided stats data fields.](https://github.com/yahoo/fetchr/blob/master/README.md#stats-monitoring--analysis)

Example for how to configure `statsCollector`:

```js
import Fluxible from 'fluxible';
import fetchrPlugin from 'fluxible-plugin-fetchr';
const app = new Fluxible();

app.plug(fetchrPlugin({
    corsPath: 'http://www.foo.com',
    xhrPath: '/fooProxy',
    statsCollector: function (actionContext, stats) {
        // just console logging as a naive example.  there is a lot more you can do here,
        // like aggregating stats or filtering out stats you don't want to monitor
        console.log('Request for resource', stats.resource,
            'with', stats.operation,
            'returned statusCode:', stats.statusCode,
            ' within', stats.time, 'ms');
    }
}));
```

## API

- [fluxible-plugin-fetchr](https://github.com/yahoo/fluxible/blob/master/packages/fluxible-plugin-fetchr/docs/fluxible-plugin-fetchr.md)

## License

This software is free to use under the Yahoo! Inc. BSD license.
See the [LICENSE file][] for license text and copyright information.

[LICENSE file]: https://github.com/yahoo/fluxible/blob/master/LICENSE.md

---
_Source: https://npm.io/package/fluxible-plugin-fetchr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._