Improve render performance for GQL query page

remko · Oct 24, 2021 · 89d3778 · 89d3778
1 parent c210f5e
commit 89d3778
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 33 deletions.
diff --git a/src/EntitiesTable.tsx b/src/EntitiesTable.tsx
@@ -96,6 +96,8 @@ function Header({
  );
 }
 
+const defaultSort = { property: null, direction: OrderDirection.Ascending };
+
 function EntitiesTable({
  entities,
  onNext,
@@ -105,7 +107,7 @@ function EntitiesTable({
  namespace,
  page,
  pageSize,
- sort = { property: null, direction: OrderDirection.Ascending },
+ sort = defaultSort,
  onChangeSort,
  onChangePageSize,
 }: {

diff --git a/src/QueryPage.tsx b/src/QueryPage.tsx
@@ -8,28 +8,71 @@ import { useLocation } from "wouter";
 import QuestionCircle from "./ui/icons/question-circle";
 import useDocumentTitle from "./ui/useDocumentTitle";
 
+function QueryInput({
+ initialQuery,
+ onRunQuery,
+}: {
+ initialQuery: string;
+ onRunQuery: (q: string) => void;
+}) {
+ const [query, setQuery] = React.useState(initialQuery);
+
+ const updateQuery = React.useCallback((ev) => {
+ setQuery(ev.target.value);
+ }, []);
+
+ const runQuery = React.useCallback(
+ (ev) => {
+ ev.preventDefault();
+ onRunQuery(query);
+ },
+ [onRunQuery, query],
+ );
+
+ return (
+ <form className="mb-3">
+ <div className="mb-3">
+ <label className="form-label">
+ GQL Query
+ <a
+ href="https://cloud.google.com/datastore/docs/reference/gql_reference#grammar"
+ rel="noreferrer"
+ target="_blank"
+ >
+ <QuestionCircle className="bi ms-2" />
+ </a>
+ </label>
+ <textarea
+ autoFocus={true}
+ className="form-control"
+ rows={5}
+ value={query}
+ onChange={updateQuery}
+ />
+ </div>
+ <button className="btn btn-primary" onClick={runQuery}>
+ Run Query
+ </button>
+ </form>
+ );
+}
+
 export default function QueryPage({ namespace }: { namespace: string | null }) {
  const q = qs.parse(window.location.search) as Record<string, string>;
  const currentQuery = q.q || "";
- const [query, setQuery] = React.useState(currentQuery);
 
  useDocumentTitle("Query");
 
  const [, setLocation] = useLocation();
 
- const updateQuery = React.useCallback((ev) => {
- setQuery(ev.target.value);
- }, []);
-
  const {
  data: queryResults,
  error,
  isLoading,
  } = useGQLQuery(currentQuery, namespace);
 
  const runQuery = React.useCallback(
- (ev) => {
- ev.preventDefault();
+ (query: string) => {
  setLocation(
  window.location.pathname +
  "?" +
@@ -39,35 +82,12 @@ export default function QueryPage({ namespace }: { namespace: string | null }) {
  }),
  );
  },
- [q, query, setLocation],
+ [q, setLocation],
  );
 
  return (
  <div>
- <form className="mb-3">
- <div className="mb-3">
- <label className="form-label">
- GQL Query
- <a
- href="https://cloud.google.com/datastore/docs/reference/gql_reference#grammar"
- rel="noreferrer"
- target="_blank"
- >
- <QuestionCircle className="bi ms-2" />
- </a>
- </label>
- <textarea
- autoFocus={true}
- className="form-control"
- rows={5}
- value={query}
- onChange={updateQuery}
- />
- </div>
- <button className="btn btn-primary" onClick={runQuery}>
- Run Query
- </button>
- </form>
+ <QueryInput initialQuery={currentQuery} onRunQuery={runQuery} />
  {error != null ? <ErrorMessage error={error} /> : null}
  {isLoading ? (
  <Loading />