diff --git a/examples/next/getting-started/src/pages/_app.tsx b/examples/next/getting-started/src/pages/_app.tsx index ca8ff30bf..6b659b1a9 100644 --- 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 index 533163342..ef94986d0 100644 --- 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 ( <>
)} +
{ post.author.node.nicename }
diff --git a/examples/next/getting-started/src/pages/posts/index.tsx b/examples/next/getting-started/src/pages/posts/index.tsx index d0b73d5ec..18298f2fa 100644 --- 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 ( <>
=10" } }, + "node_modules/@gqless/logger": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@gqless/logger/-/logger-2.0.11.tgz", + "integrity": "sha512-pp57JZWsfC2nJdDlRPw0lTLuJi6eQk32DdzmMaGHca1yyX0dvcjm/hK9+b3qTz0AX0fBATnltrc3ZSkjniXQcw==", + "dependencies": { + "prettier": "^2.2.1", + "serialize-error": "^8.1.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "gqless": "^2.0.13" + } + }, "node_modules/@gqless/react": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@gqless/react/-/react-2.0.15.tgz", @@ -26840,7 +26857,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz", "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==", - "dev": true, "bin": { "prettier": "bin-prettier.js" }, @@ -30365,6 +30381,31 @@ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", "dev": true }, + "node_modules/serialize-error": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-8.1.0.tgz", + "integrity": "sha512-3NnuWfM6vBYoy5gZFvHiYsVbafvI9vZv/+jlIigFn4oP4zjNPK3LhcY0xSCgeb1a5L8jO71Mit9LlNoi2UfDDQ==", + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/serialize-error/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/serialize-javascript": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz", @@ -35043,6 +35084,7 @@ } }, "packages/core": { + "name": "@wpengine/headless-core", "version": "0.6.11", "license": "MIT", "dependencies": { @@ -35085,9 +35127,11 @@ } }, "packages/next": { + "name": "@wpengine/headless-next", "version": "0.6.11", "license": "MIT", "dependencies": { + "@gqless/logger": "^2.0.11", "@gqless/react": "^2.0.15", "@wpengine/headless-core": "^0.6.9", "@wpengine/headless-react": "^0.6.9", @@ -35133,6 +35177,7 @@ } }, "packages/react": { + "name": "@wpengine/headless-react", "version": "0.6.11", "license": "MIT", "dependencies": { @@ -37005,6 +37050,15 @@ } } }, + "@gqless/logger": { + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@gqless/logger/-/logger-2.0.11.tgz", + "integrity": "sha512-pp57JZWsfC2nJdDlRPw0lTLuJi6eQk32DdzmMaGHca1yyX0dvcjm/hK9+b3qTz0AX0fBATnltrc3ZSkjniXQcw==", + "requires": { + "prettier": "^2.2.1", + "serialize-error": "^8.1.0" + } + }, "@gqless/react": { "version": "2.0.15", "resolved": "https://registry.npmjs.org/@gqless/react/-/react-2.0.15.tgz", @@ -39454,6 +39508,7 @@ "@wpengine/headless-next": { "version": "file:packages/next", "requires": { + "@gqless/logger": "^2.0.11", "@gqless/react": "^2.0.15", "@graphql-codegen/add": "^2.0.2", "@graphql-codegen/cli": "^1.21.5", @@ -56080,8 +56135,7 @@ "prettier": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz", - "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==", - "dev": true + "integrity": "sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==" }, "prettier-linter-helpers": { "version": "1.0.0", @@ -58869,6 +58923,21 @@ } } }, + "serialize-error": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-8.1.0.tgz", + "integrity": "sha512-3NnuWfM6vBYoy5gZFvHiYsVbafvI9vZv/+jlIigFn4oP4zjNPK3LhcY0xSCgeb1a5L8jO71Mit9LlNoi2UfDDQ==", + "requires": { + "type-fest": "^0.20.2" + }, + "dependencies": { + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==" + } + } + }, "serialize-javascript": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz", diff --git a/packages/next/package.json b/packages/next/package.json index ae4bf3ea5..2745af51b 100644 --- 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 index d4ffac310..8db3593b8 100644 --- 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( @@ -205,3 +207,19 @@ export function client( 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 () => {}; + } +}