https://github.com/redradix/fetch-adapter
Fetch adapter for redux-query
https://github.com/redradix/fetch-adapter
Last synced: 3 months ago
JSON representation
Fetch adapter for redux-query
- Host: GitHub
- URL: https://github.com/redradix/fetch-adapter
- Owner: redradix
- Created: 2017-04-23T01:28:58.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-30T22:19:58.000Z (over 7 years ago)
- Last Synced: 2025-03-11T01:08:41.158Z (3 months ago)
- Language: JavaScript
- Size: 52.7 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fetch-adapter
[](https://www.npmjs.com/package/fetch-adapter)
`fetch-adapter` is a network adapter designed to enable [`redux-query`](https://github.com/amplitude/redux-query) to work with the [Fetch API](https://developer.mozilla.org/en/docs/Web/API/Fetch_API).
> This adapter will not work with versions >= 1.4.0 and < 2.0.0 of `redux-query` due to [an issue in the library](https://github.com/amplitude/redux-query/issues/68).
## Getting started
Install `fetch-adapter` via npm:
```sh
$ npm install --save fetch-adapter
```
If you are already using or setting up `redux-query` in your project, your store configuration should look like this:
```js
// configureStore.js
import { applyMiddleware, createStore, combineReducers } from 'redux';
import { entitiesReducer, queriesReducer, queryMiddleware } from 'redux-query';
import createLogger from 'redux-logger';
export const getQueries = (state) => state.queries;
export const getEntities = (state) => state.entities;
const reducer = combineReducers({
entities: entitiesReducer,
queries: queriesReducer,
});
const logger = createLogger();
const store = createStore(
reducer,
applyMiddleware(queryMiddleware(getQueries, getEntities), logger)
);
```
In order to get `redux-query` to perform network requests with `window.fetch()`, all you need to do is pass this adapter to the advanced query middleware:
```diff
diff --git a/configureStore.js b/configureStore.js
index cd5be03..b3bda95 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,6 @@
import { applyMiddleware, createStore, combineReducers } from 'redux';
-import { entitiesReducer, queriesReducer, queryMiddleware } from 'redux-query';
+import { entitiesReducer, queriesReducer, queryMiddlewareAdvanced } from 'redux-query';
+import fetchNetworkAdapter from 'fetch-adapter';
import createLogger from 'redux-logger';
export const getQueries = (state) => state.queries;
@@ -13,5 +14,8 @@ const reducer = combineReducers({
const logger = createLogger();
const store = createStore(
reducer,
- applyMiddleware(queryMiddleware(getQueries, getEntities), logger)
+ applyMiddleware(
+ queryMiddlewareAdvanced(fetchNetworkAdapter)(getQueries, getEntities),
+ logger
+ )
);
```