{note.content}
{displayName}
{content?.about &&{content.about}
}{note.content}
Latest Notes ({timeline?.length || 0})
{timeline?.map((note) =>Live Nostr Feed
{displayName}
{profile?.about &&{profile.about}
}Zaps ({zaps.length})
{zaps.map((zap) => (Zap amount: {/* parse zap amount from event */}
Loading...
;
return {event.content}
;
}
Loading Sequence [](https://hzrd149.github.io/applesauce/loaders/event-loader.html#loading-sequence)
------------------------------------------------------------------------------------------------------
The Event Loader follows this sequence when loading events:
1. Attempt to load from cache (if configured)
2. Use relay hints from event pointers (if enabled)
3. Fetch from additional relays (if configured)
This approach ensures efficient event loading with minimal network requests.
---
# Address Loader | applesauce
[Skip to content](https://hzrd149.github.io/applesauce/loaders/address-loader.html#VPContent)
Return to top
Address Loader [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#address-loader)
====================================================================================================
The Address Loader is a specialized loader for fetching Nostr replaceable events by their address (kind, pubkey, and optional identifier). It provides an efficient way to batch and deduplicate requests, cache results, and handle relay hints.
WARNING
The observable returned by the Address Loader MUST be subscribed to in order for the request to be made. No request will be sent until you call `.subscribe()` on the returned observable.
Basic Usage [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#basic-usage)
----------------------------------------------------------------------------------------------
ts
import { createAddressLoader } from "applesauce-loaders/loaders";
import { RelayPool } from "applesauce-relay";
// Create a relay pool
const pool = new RelayPool();
// Create an address loader (do this once at the app level)
const addressLoader = createAddressLoader(pool);
// Later, use the loader to fetch events by address
addressLoader({
kind: 0,
pubkey: "user_pubkey",
relays: ["wss://relay.example.com"],
}).subscribe((event) => {
console.log("Loaded profile:", event);
});
Configuration Options [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#configuration-options)
------------------------------------------------------------------------------------------------------------------
The `createAddressLoader` function accepts these options:
* `bufferTime`: Time interval to buffer requests in ms (default 1000)
* `bufferSize`: Max buffer size (default 200)
* `eventStore`: An event store used to deduplicate events
* `cacheRequest`: A method used to load events from a local cache
* `followRelayHints`: Whether to follow relay hints (default true)
* `lookupRelays`: Fallback lookup relays to check when event can't be found
* `extraRelays`: An array of relays to always fetch from
WARNING
If an event store is not provided, the loader will not be able to deduplicate events.
Working with Relay Pools [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#working-with-relay-pools)
------------------------------------------------------------------------------------------------------------------------
The Address Loader requires a request method for loading Nostr events from relays. You can provide this in multiple ways:
### Using a RelayPool instance [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#using-a-relaypool-instance)
The simplest approach is to pass a RelayPool instance directly:
ts
import { createAddressLoader } from "applesauce-loaders/loaders";
import { RelayPool } from "applesauce-relay";
const pool = new RelayPool();
const addressLoader = createAddressLoader(pool, {
eventStore,
cacheRequest,
});
### Using a custom request method [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#using-a-custom-request-method)
You can also provide a custom request method, such as one from nostr-tools:
ts
import { createAddressLoader } from "applesauce-loaders/loaders";
import { SimplePool } from "nostr-tools";
import { Observable } from "rxjs";
const pool = SimplePool();
// Create a custom request function using nostr-tools
function customRequest(relays, filters) {
return new Observable((observer) => {
const sub = pool.subscribeMany(relays, filters, {
onevent: (event) => observer.next(event),
eose: () => observer.complete(),
});
return () => sub.close();
});
}
// Create address loader with custom request
const addressLoader = createAddressLoader(customRequest, options);
Loading from cache [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#loading-from-cache)
------------------------------------------------------------------------------------------------------------
For improved performance, you can configure the loader to use a local cache:
ts
import { createAddressLoader } from "applesauce-loaders/loaders";
import { openDB, getEventsForFilters } from "nostr-idb";
// Setup a local event cache
const cache = await openDB();
function cacheRequest(filters) {
return getEventsForFilters(cache, filters);
}
const addressLoader = createAddressLoader(pool, {
cacheRequest,
eventStore,
});
// Events from cache are automatically marked using markFromCache
addressLoader({ kind: 0, pubkey: "user_pubkey" }).subscribe((event) => {
if (!isFromCache(event)) {
// This is a new event from the network
addEvents(cache, [event]);
}
});
Real-World Example [](https://hzrd149.github.io/applesauce/loaders/address-loader.html#real-world-example)
------------------------------------------------------------------------------------------------------------
Here's how you might use the Address Loader in a React application to load user profiles:
tsx
import { EventStore } from "applesauce-core";
import { createAddressLoader } from "applesauce-loaders/loaders";
import { RelayPool } from "applesauce-relay";
import { kinds } from "nostr-tools";
import { useEffect, useState } from "react";
import { EMPTY, ignoreElements, merge } from "rxjs";
// Setup at app level
const eventStore = new EventStore();
const pool = new RelayPool();
const addressLoader = createAddressLoader(pool, {
eventStore,
lookupRelays: ["wss://purplepag.es/"],
});
function ProfileComponent({ pubkey, relays }) {
const [profile, setProfile] = useState(null);
// Load the profile when component mounts
useEffect(() => {
// Check if we already have the profile
if (eventStore.hasReplaceable(kinds.Metadata, pubkey)) {
setProfile(eventStore.getLatestReplaceable(kinds.Metadata, pubkey));
return;
}
// Load profile from the network
const subscription = addressLoader({
kind: kinds.Metadata,
pubkey,
relays,
}).subscribe((event) => {
setProfile(JSON.parse(event.content));
});
return () => subscription.unsubscribe();
}, [pubkey]);
if (!profile) return Loading profile...
;
return (
{profile.name || "Anonymous"}
{profile.picture &&{profile.about}
{events.map((event) => (
);
}
Loading Sequence [](https://hzrd149.github.io/applesauce/loaders/timeline-loader.html#loading-sequence)
---------------------------------------------------------------------------------------------------------
The Timeline Loader follows this sequence when loading events:
1. Start with a cursor at Infinity (most recent events)
2. Attempt to load from cache (if configured)
3. Fetch from specified relays in parallel
4. Update the cursor to the oldest event's timestamp
5. Each subsequent call starts from the updated cursor
6. Stop when no more events are returned or the specified timestamp is reached
This stateful approach allows efficient pagination through chronological timelines with minimal code complexity.
---
# Reactions Loader | applesauce
[Skip to content](https://hzrd149.github.io/applesauce/loaders/reactions-loader.html#VPContent)
Return to top
Reactions Loader [](https://hzrd149.github.io/applesauce/loaders/reactions-loader.html#reactions-loader)
==========================================================================================================
The Reactions Loader is a specialized loader for fetching [NIP-25](https://github.com/nostr-protocol/nips/blob/master/25.md)
reaction events for any given Nostr event. It is built on top of the [Tag Value Loader](https://hzrd149.github.io/applesauce/loaders/tag-value-loader.html)
and automatically handles both regular events and addressable events.
WARNING
The observable returned by the Reactions Loader MUST be subscribed to in order for the request to be made. No request will be sent until you call `.subscribe()` on the returned observable.
Basic Usage [](https://hzrd149.github.io/applesauce/loaders/reactions-loader.html#basic-usage)
------------------------------------------------------------------------------------------------
ts
import { createReactionsLoader } from "applesauce-loaders/loaders";
import { RelayPool } from "applesauce-relay";
// Create a relay pool
const pool = new RelayPool();
// Create a reactions loader (do this once at the app level)
const reactionsLoader = createReactionsLoader(pool);
// Later, use the loader to fetch reactions for any event
const someEvent = { id: "event_id", kind: 1 /* ... */ };
reactionsLoader(someEvent, ["wss://relay.example.com"]).subscribe((reactionEvent) => {
console.log("Received reaction:", reactionEvent);
});
How It Works [](https://hzrd149.github.io/applesauce/loaders/reactions-loader.html#how-it-works)
--------------------------------------------------------------------------------------------------
The Reactions Loader automatically:
* Determines if the target event is addressable (replaceable) or a regular event
* Uses the appropriate tag (`a` for addressable events, `e` for regular events) to fetch reactions
* Merges relay hints from the event's seen relays (if `useSeenRelays` is enabled)
* Filters results to only return NIP-25 reaction events (kind 7)
Configuration Options [](https://hzrd149.github.io/applesauce/loaders/reactions-loader.html#configuration-options)
--------------------------------------------------------------------------------------------------------------------
The `createReactionsLoader` function accepts these options:
* `useSeenRelays`: Whether to include relays where the event was seen (default `true`)
* All other options from Tag Value Loader: `bufferTime`, `bufferSize`, `authors`, `since`, `cacheRequest`, `extraRelays`, `eventStore`
ts
const reactionsLoader = createReactionsLoader(pool, {
useSeenRelays: true,
bufferTime: 500,
eventStore,
cacheRequest,
});
Example with React [](https://hzrd149.github.io/applesauce/loaders/reactions-loader.html#example-with-react)
--------------------------------------------------------------------------------------------------------------
tsx
import { createReactionsLoader } from "applesauce-loaders/loaders";
import { RelayPool } from "applesauce-relay";
import { useEffect, useState } from "react";
// Setup at app level
const pool = new RelayPool();
const reactionsLoader = createReactionsLoader(pool);
function ReactionsComponent({ event }) {
const [reactions, setReactions] = useState([]);
useEffect(() => {
const subscription = reactionsLoader(event).subscribe((reactionEvent) => {
setReactions((prev) => [...prev, reactionEvent]);
});
return () => subscription.unsubscribe();
}, [event.id]);
// Group reactions by content
const reactionCounts = reactions.reduce((acc, reaction) => {
const content = reaction.content || "+";
acc[content] = (acc[content] || 0) + 1;
return acc;
}, {});
return (
{event.content}
))}
Reactions ({reactions.length})
{Object.entries(reactionCounts).map(([emoji, count]) => (
{emoji} {count}
))}
Reaction Summary
Total reactions: {reactions.length}
Unique reactors: {uniqueReactors.size}
Positive: {positiveReactions.length}
Negative: {negativeReactions.length}
Replies ({replies.length})
{replies.map((reply) => ({reply.content}
{event.pubkey} {event.created_at}
{content}