IPFS Public Gateway Fetcher is a component that helps you fetch IPFS content without needing to set or configure any gateway. It automatically selects the fastest and most suitable gateways from the Protocol Labs' public gateway list and connects to them to fetch the content. If it fails to fetch data from a gateway multiple times, it removes that gateway from the list and selects another one.
- Automatically selects the fastest and most suitable gateways to fetch IPFS content.
- Supports various types of IPFS content, including paths with CIDv0 and CIDv1, IPFS protocol paths, pre-filled IPFS gateway paths, CIDv1 with subdomain paths, and non-IPFS URLs.
- Verifies if the passed URL/CID/Path is a valid IPFS link.
- Supports fetching JSON metadata files and images.
- Allows customization of gateways by passing a JS file containing an array of strings.
- Provides an initializer function to connect to peers and fetch domains.
- Provides a function to check if the connection is established.
You can check out the live demo of the Vue implementation of IPFS Public Gateway Fetcher here, and the repository here.
Here's what we plan to add to IPFS Public Gateway Fetcher:
- Improve the conditions for considering IPFS connected.
- Improve the conditions for discarding a connected gateway.
- Add a cache for sucessfuly fetche content.
To install IPFS Public Gateway Fetcher in your project, run the following command:
npm install -s ipfs-public-fetcher
You can then use the package as follows:
import {
Initialize,
FetchJSON,
FetchContent,
IsConnected,
} from "ipfs-public-fetcher";
To use IPFS Public Gateway Fetcher, you need to first initialize the package to connect peers:
Initialize();
You can use different parameters to configure the plugin
- customDomains: Customize domains to try connection.
const customDomains = [
"https://ipfs.io/ipfs/:hash",
"https://dweb.link/ipfs/:hash",
];
Initialize({ customDomains });
- verbose: Log consoles in a verbose way. Use it to debug.
- forceInitialize: Force initialize even on hot reload during development phase.
- minimumGateways: Minimum number of gateways to connect before consider it connected. Default to 0.
Initialize({
verbose: true,
forceInitialize: true,
minimumGateways: 1,
});
After that, you can fetch data in two different ways:
const json = await FetchJSON("bafybe...sk3m");
const contentPath = await FetchContent("bafybe...sk3m");
You can also verify the connection status at any moment using the following function:
const connected = IsConnected();