parse-community
diff --git a/‎examples/backend-todo/package-lock.json
+1,259-5,264 b/‎examples/backend-todo/package-lock.json
+1,259-5,264
diff --git a/‎examples/backend-todo/package.json
+3-4 b/‎examples/backend-todo/package.json
+3-4
diff --git a/‎examples/next-ts-todo/next-env.d.ts
+4 b/‎examples/next-ts-todo/next-env.d.ts
+4
diff --git a/‎examples/next-ts-todo/package-lock.json
+2,314-2,292 b/‎examples/next-ts-todo/package-lock.json
+2,314-2,292
diff --git a/‎examples/next-ts-todo/package.json
+12-12 b/‎examples/next-ts-todo/package.json
+12-12
diff --git a/‎examples/next-ts-todo/pages/no-ssr.tsx
+93 b/‎examples/next-ts-todo/pages/no-ssr.tsx
+93
@@ -9,8 +9,7 @@
     "dev": "npm run start"
   },
   "devDependencies": {
-    "mongodb-runner": "^4.8.0",
-    "parse-dashboard": "^2.1.0",
-    "parse-server": "^4.10.4"
+    "mongodb-runner": "4.8.3",
+    "parse-dashboard": "3.2.1"
   }
-}
+}
@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
@@ -10,19 +10,19 @@
     "start": "next start -p 3031"
   },
   "dependencies": {
-    "@parse/react-ssr": "^0.0.1-alpha.8",
-    "bootstrap": "^4.5.3",
-    "jquery": "^3.5.1",
-    "next": "11.1.1",
-    "parse": "^2.18.0",
-    "popper.js": "^1.16.1",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "tslib": "^2.0.3"
+    "@parse/react-ssr": "0.0.1-alpha.14",
+    "bootstrap": "4.6.0",
+    "jquery": "3.6.0",
+    "next": "11.1.2",
+    "parse": "3.3.1",
+    "popper.js": "1.16.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@types/react": "^16.9.56",
-    "typescript": "^4.0.5",
-    "watch": "^1.0.2"
+    "@types/react": "17.0.29",
+    "typescript": "4.4.4",
+    "watch": "1.0.2"
   }
 }
@@ -0,0 +1,93 @@
+import { useState, useEffect, useCallback } from 'react';
+import Head from 'next/head'
+import { initializeParse, encodeParseQuery, useParseQuery } from '@parse/react-ssr';
+
+initializeParse(
+  'http://localhost:1337/parse',
+  'APPLICATION_ID',
+  'JAVASCRIPT_KEY'
+);
+
+const createParseQuery = hideDone => {
+  const parseQuery = new Parse.Query('Todo');
+
+  if (hideDone) {
+    parseQuery.notEqualTo('done', true);
+  }
+
+  (parseQuery as any).withCount();
+
+  return parseQuery;
+};
+
+export default function Home() {
+  const [
+    {
+      hideDone,
+      parseQuery
+    },
+    setParseQueryState
+  ] = useState({
+    hideDone: false,
+    parseQuery: createParseQuery(false)
+  });
+
+  const toggleHideDone = useCallback(
+    () => {
+      setParseQueryState({
+        hideDone: !hideDone,
+        parseQuery: createParseQuery(!hideDone)
+      });
+    },
+    [hideDone]
+  );
+
+  const {
+    isLive,
+    isLoading,
+    isSyncing,
+    results,
+    count,
+    error,
+    reload
+  } = useParseQuery(parseQuery);
+
+  return (
+    <>
+      <Head>
+        <title>Todo Example using @parse/ssr on Next.js (Typescript)</title>
+        <link rel="icon" href="/favicon-32x32.png" />
+      </Head>
+      <button onClick={toggleHideDone}>
+        {hideDone ? 'Unhide' : 'Hide'} done todos
+      </button>
+      {isLoading && (
+        <p>Loading...</p>
+      )}
+      {isLive && (
+        <p>Live!</p>
+      )}
+      {isSyncing && (
+        <p>Syncing...</p>
+      )}
+      {results && (
+        <ul>
+          {results.map(result => (
+            <li key={result.id}>
+              {result.get('title')}
+            </li>
+          ))}
+        </ul>
+      )}
+      <p>{count}</p>
+      {error && (
+        <p>{error.message}</p>
+      )}
+      <button
+        onClick={reload}
+      >
+        Reload
+      </button>
+    </>
+  );
+};