recipes/invalidate-query

Author: voliva

docs/examples/InvalidateQuery.jsx

@@ -0,0 +1,75 @@
+import { bind, Subscribe } from "@react-rxjs/core"
+import { createSignal } from "@react-rxjs/utils"
+import React, { useRef } from "react"
+import { concat, of } from "rxjs"
+import { concatMap, switchMap } from "rxjs/operators"
+
+const { getTodos, postTodo } = (() => {
+  let todos = [
+    {
+      id: 0,
+      title: "Grocery shopping",
+    },
+  ]
+
+  return {
+    getTodos: async () => todos,
+    postTodo: async (todo) => {
+      todos = [
+        ...todos,
+        {
+          id: todos[todos.length - 1].id + 1,
+          title: todo
+        },
+      ]
+    },
+  }
+})()
+
+const [todoPost$, addTodo] = createSignal()
+
+const todoResult$ = todoPost$.pipe(concatMap(postTodo))
+
+const [useTodos] = bind(
+  // When do we need to request todos?
+  concat(
+    // 1. One single time when starting
+    of(null),
+    // 2. Every time we have created a new todo
+    todoResult$
+  ).pipe(
+    switchMap(getTodos),
+  )
+)
+
+function Todos() {
+  const ref = useRef()
+  const todos = useTodos()
+
+  const handleAddClick = () => {
+    addTodo(ref.current.value);
+    ref.current.value = ''
+    ref.current.focus()
+  }
+
+  return (
+    <div>
+      <input type="text" defaultValue="Do Laundry" ref={ref} />
+      <button onClick={handleAddClick}>Add Todo</button>
+
+      <ul>
+        {todos.map((todo) => (
+          <li key={todo.id}>{todo.title}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default function InvalidateQuery() {
+  return (
+    <Subscribe fallback={<div>Loading...</div>}>
+      <Todos />
+    </Subscribe>
+  )
+}

docs/quick-start.md

@@ -79,7 +79,7 @@ function CharacterCounter() {
 }
 ```
 
-The interactive result:
+### Interactive result
 
 <BrowserOnly>
   {() => <CharacterCounter />}

docs/recipes/invalidate-query.md

@@ -0,0 +1,73 @@
+---
+title: Invalidate Query
+---
+
+import InvalidateQuery from "../examples/InvalidateQuery"
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+```tsx
+import { bind, Subscribe } from "@react-rxjs/core"
+import { createSignal } from "@react-rxjs/utils"
+import { concat, of } from "rxjs"
+import { concatMap, switchMap } from "rxjs/operators"
+import { getTodos, postTodo } from "../my-api"
+
+const [todoPost$, addTodo] = createSignal<string>()
+
+const todoResult$ = todoPost$.pipe(
+  concatMap(postTodo)
+)
+
+const [useTodos] = bind(
+  // When do we need to request todos?
+  concat(
+    // 1. One single time when starting
+    of(null),
+    // 2. Every time we have created a new todo
+    todoResult$
+  ).pipe(
+    switchMap(getTodos),
+  )
+)
+
+function Todos() {
+  const ref = useRef()
+  const todos = useTodos()
+
+  const handleAddClick = () => {
+    addTodo(ref.current.value);
+    ref.current.value = ''
+    ref.current.focus()
+  }
+
+  return (
+    <div>
+      <ul>
+        {todos.map((todo) => (
+          <li key={todo.id}>{todo.title}</li>
+        ))}
+      </ul>
+
+      <button
+        onClick={handleAddClick}
+      >
+        Add Todo
+      </button>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <Subscribe fallback={<div>Loading...</div>}>
+      <Todos />
+    </Subscribe>
+  )
+}
+```
+
+### Interactive result
+
+<BrowserOnly>
+  {() => <InvalidateQuery />}
+</BrowserOnly>

sidebars.js

@@ -1,6 +1,7 @@
 module.exports = {
   someSidebar: {
     Introduction: ["motivation", "quick-start", "features"],
+    Recipes: ["recipes/invalidate-query"],
     "API Reference": [
       {
         type: "category",