react-refetch

library3.0.1jsnpmunverified

A simple, declarative, and composable way to fetch data for React components. Current stable version is 3.0.1, last updated in 2020. It provides a higher-order component (connect) and decorators to declaratively specify data dependencies. Key differentiators include automatic request deduplication, caching, and support for refreshing data (e.g., with React Hot Loader). However, the package is effectively unmaintained, with no updates since 2017, and works only with React class components (not hooks). No longer recommended for new projects.

networking frontend

npm install react-refetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-REFETCH

react-refetch

networkingjavascriptv3.0.1

harness data pending

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.

connect

✓ import { connect } from 'react-refetch'

✗ const connect = require('react-refetch').connect

ESM import is preferred; CommonJS require also works.

RefetchProvider

✓ import { RefetchProvider } from 'react-refetch'

✗ import RefetchProvider from 'react-refetch'

RefetchProvider is a named export, not default.

default

✓ import ReactRefetch from 'react-refetch'

✗ import { default } from 'react-refetch'

The package has a default export that is the connect function itself, but using named connect is more explicit.

Shows how to use connect to fetch data declaratively and handle loading/error states.

import React from 'react'; import { connect } from 'react-refetch'; class MyComponent extends React.Component { render() { const { fetching, data, error } = this.props.namesList; if (error) return <div>Error: {error.message}</div>; if (fetching) return <div>Loading...</div>; return <ul>{data.map(name => <li key={name}>{name}</li>)}</ul>; } } export default connect(() => ({ namesList: { url: 'https://api.example.com/names' } }))(MyComponent);

Debug

Known issues

deprecatedPackage no longer maintained. No updates since 2017.

fix

Use modern alternatives like react-query, SWR, or Redux Toolkit Query.

affects: *

gotchaconnect expects a function that returns a map of prop keys to fetch configs. Missing parentheses or incorrect shape can cause silent failures.

fix

Ensure the first argument to connect is a function returning an object with key: { url: '...' } structure.

affects: *

gotchaThe package requires React class components and does not work with functional components or hooks.

fix

Refactor to use a class component or switch to a hooks-based library.

affects: *

Errors

Common errors & fixes

Uncaught TypeError: Cannot read property 'data' of undefined

The prop passed to the component is undefined because the connect function isn't returning the expected shape or the URL is invalid.

fix

Check that the connect map function returns a proper object with keys matching the prop name, e.g., { myProp: { url: '...' } }.

Warning: Failed prop type: The prop `fetch` is marked as required in `Connect(MyComponent)`, but its value is `undefined`.

The component wrapped with connect expects a 'fetch' prop but it's not being provided.

fix

Ensure you are calling connect correctly and the map function returns the expected prop names.

Uncaught (in promise) TypeError: Failed to fetch

The URL provided is unreachable or CORS is blocking the request.

fix

Verify the URL is correct and allows cross-origin requests. Use a proxy if necessary.

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React components

Agent activity

29 hits · last 30 days

node

Resources

githubhttps://github.com/heroku/react-refetch ↗

packagereact-refetch ↗

homepagehttps://github.com/heroku/react-refetch ↗