feat: adding optional logger for queries

wpengine · Jun 17, 2021 · 0aa4bd2 · 0aa4bd2
1 parent f0e5ae2
commit 0aa4bd2
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 15 deletions.
diff --git a/examples/next/getting-started/src/pages/_app.tsx b/examples/next/getting-started/src/pages/_app.tsx
@@ -1,6 +1,5 @@
 import { headlessConfig } from '@wpengine/headless-core';
 import { HeadlessProvider } from '@wpengine/headless-next';
-import Head from 'next/head';
 import 'normalize.css/normalize.css';
 import React from 'react';
 import 'scss/main.scss';

diff --git a/examples/next/getting-started/src/pages/posts/[postSlug].tsx b/examples/next/getting-started/src/pages/posts/[postSlug].tsx
@@ -4,14 +4,10 @@ import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 
 export default function Page() {
-  const { usePost, useGeneralSettings, useQuery } = client();
+  const { usePost, useGeneralSettings } = client();
   const generalSettings = useGeneralSettings();
   const post = usePost();
 
-  if (useQuery().$state.isLoading) {
-    return <>Loading...</>;
-  }
-
   return (
     <>
       <Header
@@ -32,6 +28,7 @@ export default function Page() {
           {post && (
             <div dangerouslySetInnerHTML={{ __html: post.content() ?? '' }} />
           )}
+          <div>{ post.author.node.nicename }</div>
         </div>
       </main>
 

diff --git a/examples/next/getting-started/src/pages/posts/index.tsx b/examples/next/getting-started/src/pages/posts/index.tsx
@@ -2,7 +2,6 @@ import { getNextStaticProps, client } from '@wpengine/headless-next';
 import { Footer, Header, Pagination, Posts } from 'components';
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 import styles from 'scss/pages/home.module.scss';
@@ -12,7 +11,7 @@ export default function Page() {
     query = {},
   } = useRouter();
   const { postSlug, postCursor } = query;
-  const { usePosts, useGeneralSettings, useQuery } = client();
+  const { usePosts, useGeneralSettings } = client();
   const generalSettings = useGeneralSettings();
   const isBefore = postSlug === 'before';
   const posts = usePosts({
@@ -22,10 +21,6 @@ export default function Page() {
     last: isBefore ? 6 : undefined,
   });
 
-  if (useQuery().$state.isLoading) {
-    return <>Loading...</>;
-  }
-
   return (
     <>
       <Header

diff --git a/...es/preview/post/[[...postPreviewUri]].tsx → ...tarted/src/pages/preview/post/preview.tsx b/...es/preview/post/[[...postPreviewUri]].tsx → ...tarted/src/pages/preview/post/preview.tsx
@@ -3,6 +3,7 @@ import { Footer, Header, CTA } from 'components';
 import { useRouter } from 'next/router';
 
 export default function Page() {
+  const { query: { p }} = useRouter();
   const { usePost, useGeneralSettings, useQuery } = client();
   const generalSettings = useGeneralSettings();
   const post = usePost();

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -72,6 +72,7 @@
     "typescript": "^4.3.2"
   },
   "dependencies": {
+    "@gqless/logger": "^2.0.11",
     "@gqless/react": "^2.0.15",
     "@wpengine/headless-core": "^0.6.9",
     "@wpengine/headless-react": "^0.6.9",

diff --git a/packages/next/src/client.ts b/packages/next/src/client.ts
@@ -3,6 +3,7 @@ import {
   CreateReactClientOptions,
   ReactClient,
 } from '@gqless/react';
+import type { LoggerOptions } from '@gqless/logger';
 import { useRouter } from 'next/router';
 import isObject from 'lodash/isObject';
 import merge from 'lodash/merge';
@@ -24,6 +25,7 @@ import {
   hasPostUri,
   hasPostPreviewUri,
 } from './utils';
+import defaults from 'lodash/defaults';
 
 /* eslint-disable @typescript-eslint/ban-types, @typescript-eslint/explicit-module-boundary-types */
 export function client<Schema extends GeneratedSchema = GeneratedSchema>(
@@ -205,3 +207,19 @@ export function client<Schema extends GeneratedSchema = GeneratedSchema>(
     useGeneralSettings,
   };
 }
+
+export async function logQueries(options?: LoggerOptions): Promise<() => void> {
+  try {
+    const { createLogger } = await import('@gqless/logger');
+    const logger = createLogger(
+      client().client,
+      defaults({}, options, {
+        showSelections: false,
+        showCache: false,
+      } as LoggerOptions),
+    );
+    return logger.start();
+  } catch (e) {
+    return () => {};
+  }
+}