guide/example: Demonstrate how to use the store callback option

This option is better than using the returned value.
This is because the returned value is returned only once **all** pages
are received, which can be very long if the `timeFilter` option is not
used.

examples/store-reactjs-chat/src/App.js

@@ -44,15 +44,18 @@ function App() {
   React.useEffect(() => {
     if (wakuStatus !== 'Connected') return;
 
-    waku.store
+    const processMessages = (retrievedMessages) => {
-      .queryHistory([ContentTopic])
-      .catch((e) => {
-        console.log('Failed to retrieve messages', e);
-      })
-      .then((retrievedMessages) => {
       const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
 
-        setMessages(messages);
+      setMessages((currentMessages) => {
+        return currentMessages.concat(messages.reverse());
+      });
+    };
+
+    waku.store
+      .queryHistory([ContentTopic], { callback: processMessages })
+      .catch((e) => {
+        console.log('Failed to retrieve messages', e);
       });
   }, [waku, wakuStatus]);
 
@@ -104,6 +107,7 @@ function formatDate(timestamp) {
     day: 'numeric',
     hour: 'numeric',
     minute: '2-digit',
+    second: '2-digit',
     hour12: false,
   });
 }

guides/reactjs-store.md

@@ -185,7 +185,42 @@ function decodeMessage(wakuMessage) {
 
 You now have all the building blocks to retrieve and decode messages for a store node.
 
-Finally, retrieve messages from a store node:
+Note that Waku Store queries are paginated.
+The API provided by `js-waku` automatically traverses all pages of the Waku Store response.
+By default, the most recent page is retrieved first but this can be changed with the `direction` option.
+
+First, define a React state to save the messages:
+
+```js
+function App() {
+  const [messages, setMessages] = React.useState([]);
+  /// [..]
+}
+```
+
+Then, define `processMessages` to decode and then store messages in a React state.
+You will pass `processMessages` as a `callback` option to `WakuStore.queryHistory`.
+`processMessages` will be called each time a page is received from the Waku Store. 
+
+
+```js
+const processMessages = (retrievedMessages) => {
+  const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
+
+  setMessages((currentMessages) => {
+    return currentMessages.concat(messages.reverse());
+  });
+};
+```
+
+Finally, pass `processMessage` in `WakuStore.queryHistory` as the `callback` value:
+
+```js
+waku.store
+  .queryHistory([ContentTopic], { callback: processMessages });
+```
+
+All together, you should now have:
 
 ```js
 const ContentTopic = '/toy-chat/2/huilong/proto';
@@ -198,15 +233,18 @@ function App() {
   React.useEffect(() => {
     if (wakuStatus !== 'Connected') return;
 
-    waku.store
+    const processMessages = (retrievedMessages) => {
-      .queryHistory([ContentTopic])
-      .catch((e) => {
-        console.log('Failed to retrieve messages', e);
-      })
-      .then((retrievedMessages) => {
       const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
 
-        setMessages(messages);
+      setMessages((currentMessages) => {
+        return currentMessages.concat(messages.reverse());
+      });
+    };
+
+    waku.store
+      .queryHistory([ContentTopic], { callback: processMessages })
+      .catch((e) => {
+        console.log('Failed to retrieve messages', e);
       });
   }, [waku, wakuStatus]);