Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
useApiData
✓ import { useApiData } from 'react-api-data'
✗ import useApiData from 'react-api-data'
named export, not default. Use this hook in React components.
configure
✓ import { configure } from 'react-api-data'
✗ import { configure } from 'react-api-data/hooks'
import from 'react-api-data', not a subpath.
reducer
✓ import { reducer } from 'react-api-data'
✗ const reducer = require('react-api-data').reducer
ESM import works, CommonJS require also works for Node.js/Webpack bundling.
withApiData
✓ import { withApiData } from 'react-api-data'
Higher-order component alternative to useApiData. Use with class components.
invalidateRequest
✓ import { invalidateRequest } from 'react-api-data'
Action creator to invalidate cached API requests. Use with dispatch.
Configures store with react-api-data reducer, defines endpoints with normalizr schema, and uses useApiData hook to fetch and display article data.
import { schema } from 'normalizr';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { configure, reducer, useApiData, invalidateRequest } from 'react-api-data';
import thunk from 'redux-thunk';
import React from 'react';
import { Provider, useDispatch } from 'react-redux';
const authorSchema = new schema.Entity('Author');
const articleSchema = new schema.Entity('Article', { author: authorSchema });
const endpointConfig = {
getArticle: {
url: 'http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId/:userId',
method: 'GET',
responseSchema: articleSchema
},
saveArticle: {
url: 'http://www.mocky.io/v2/5a0c203e320000772de9664c?:articleId',
method: 'POST',
afterSuccess: ({ dispatch, request, getState }) => {
dispatch(invalidateRequest('getArticle', { articleId: request.params.articleId, userId: getState().userId }));
}
}
};
const store = createStore(combineReducers({ apiData: reducer }), applyMiddleware(thunk));
store.dispatch(configure({}, endpointConfig));
const Article = ({ articleId }) => {
const article = useApiData('getArticle', { articleId, userId: 1 });
return (
<div>
{article.request.networkStatus === 'success' && (
<>
<h1>{article.data.title}</h1>
<p>{article.data.body}</p>
</>
)}
</div>
);
};
const App = () => (
<Provider store={store}>
<Article articleId='123' />
</Provider>
);
export default App;
Errors
Common errors & fixes
Could not find module 'react-api-data'
Package not installed or missing peer dependencies causing resolution failure.
fixRun `npm install react-api-data react-redux redux-thunk normalizr`
Uncaught TypeError: (0 , _reactApiData.useApiData) is not a function
Importing default instead of named export, or using incompatible version.
fixUse `import { useApiData } from 'react-api-data'` (curly braces). TypeError: Cannot read property 'networkStatus' of undefined
useApiData returned undefined because endpoint key is wrong or params missing.
fixEnsure endpoint name matches config and params object is passed correctly.
Uncaught Error: Could not find 'store' in the context of 'Connect(Article)'. Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Article) in connect options.
Component using withApiData is not wrapped in <Provider store={store}>.
fixWrap the component tree with <Provider store={store}> from react-redux. Audit
Dependencies
react-reduxrequiredpeer dependency required for Redux integration
redux-thunkrequiredpeer dependency required for async actions
normalizrrequiredpeer dependency required for response schema normalization