From fec1ff41afe27fc845be2873b6d66cc5ca57922d Mon Sep 17 00:00:00 2001
From: MoustaphaDev <81974850+MoustaphaDev@users.noreply.github.com>
Date: Fri, 19 Aug 2022 12:21:31 +0000
Subject: [PATCH] docs: refactored examples that use the logical `!` (#2602)

Co-authored-by: Jovi De Croock <decroockjovi@gmail.com>
---
 docs/basics/react-preact.md | 4 +++-
 docs/basics/vue.md          | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/basics/react-preact.md b/docs/basics/react-preact.md
index 067cc0ab87..3b20dc3483 100644
--- a/docs/basics/react-preact.md
+++ b/docs/basics/react-preact.md
@@ -195,10 +195,12 @@ executed. We can do this by setting the `pause` option to `true`:
 
 ```jsx
 const Todos = ({ from, limit }) => {
+  const shouldPause = from === undefined || from === null ||
+                      limit === undefined || limit === null;
   const [result, reexecuteQuery] = useQuery({
     query: TodosListQuery,
     variables: { from, limit },
-    pause: !from || !limit,
+    pause: shouldPause,
   });
 
   // ...
diff --git a/docs/basics/vue.md b/docs/basics/vue.md
index ad7a897a93..6596f2f0a9 100644
--- a/docs/basics/vue.md
+++ b/docs/basics/vue.md
@@ -269,6 +269,7 @@ import { useQuery } from '@urql/vue';
 export default {
   props: ['from', 'limit'],
   setup({ from, limit }) {
+    const shouldPause = computed(() => from == null || limit == null);
     return useQuery({
       query: `
         query ($from: Int!, $limit: Int!) {
@@ -279,7 +280,7 @@ export default {
         }
       `,
       variables: { from, limit },
-      pause: computed(() => !from.value || !limit.value)
+      pause: shouldPause
     });
   }
 };