Custom client functionality (#295)

* doc: (#279) adding project with custom client * feat: (#279) enabling custom clients as well as server-side clients, adding custom client to getting-started * feat: (#279) enabling ssr for authenticated client requests
wpengine · Jun 25, 2021 · 5095ee8 · 5095ee8
1 parent f884289
commit 5095ee8
Show file tree

Hide file tree

Showing 28 changed files with 20,474 additions and 318 deletions.
diff --git a/examples/next/getting-started/gqless.config.js b/examples/next/getting-started/gqless.config.js
@@ -0,0 +1,24 @@
+const dotenv = require('dotenv');
+
+dotenv.config({
+  path: '.env.local',
+});
+
+/**
+ * @type {import("@gqless/cli").GQlessConfig}
+ */
+const config = {
+  react: false,
+  scalarTypes: { DateTime: 'string' },
+  introspection: {
+    endpoint: `${
+      process.env.NEXT_PUBLIC_WORDPRESS_URL ?? process.env.WORDPRESS_URL
+    }/graphql`,
+    headers: {},
+  },
+  destination: './src/client/index.ts',
+  subscriptions: false,
+  javascriptOutput: false,
+};
+
+module.exports = config;
diff --git a/examples/next/getting-started/package.json b/examples/next/getting-started/package.json
@@ -8,6 +8,7 @@
     "start": "next start",
     "clean": "rimraf .next node_modules",
     "lint": "next lint",
+    "generate": "gqless generate",
     "wpe-build": "next build"
   },
   "dependencies": {
@@ -20,7 +21,9 @@
     "sass": "^1.35.1"
   },
   "devDependencies": {
+    "@gqless/cli": "^2.0.16",
     "@types/react": "^17.0.11",
+    "dotenv": "^10.0.0",
     "eslint": "^7.28.0",
     "eslint-config-next": "^11.0.0",
     "rimraf": "^3.0.2",

diff --git a/examples/next/getting-started/src/client/index.ts b/examples/next/getting-started/src/client/index.ts
@@ -0,0 +1,31 @@
+/**
+ * GQLESS: You can safely modify this file and Query Fetcher based on your needs
+ */
+import type { IncomingMessage } from 'http';
+import { getClient } from '@wpengine/headless-next';
+import {
+  generatedSchema,
+  scalarsEnumsHash,
+  GeneratedSchema,
+  SchemaObjectTypes,
+  SchemaObjectTypesNames,
+} from './schema.generated';
+
+export const client = getClient<
+  GeneratedSchema,
+  SchemaObjectTypesNames,
+  SchemaObjectTypes
+>({
+  schema: generatedSchema,
+  scalarsEnumsHash,
+});
+
+export function serverClient(req: IncomingMessage) {
+  return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({
+    schema: generatedSchema,
+    scalarsEnumsHash,
+    context: req,
+  });
+}
+
+export * from './schema.generated';
diff --git a/examples/next/getting-started/src/client/schema.generated.ts b/examples/next/getting-started/src/client/schema.generated.ts
diff --git a/examples/next/getting-started/src/components/Posts.tsx b/examples/next/getting-started/src/components/Posts.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-import { Post } from '@wpengine/headless-core';
+import type { Post } from 'client';
 import styles from 'scss/components/Posts.module.scss';
 import Heading, { HeadingProps } from './Heading';
 

diff --git a/examples/next/getting-started/src/pages/404.tsx b/examples/next/getting-started/src/pages/404.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { client } from '@wpengine/headless-next';
+import { client } from 'client';
 import { Header, Hero, Footer } from '../components';
 
 export default function Page(): JSX.Element {
-  const { useGeneralSettings } = client();
+  const { useGeneralSettings } = client;
   const generalSettings = useGeneralSettings();
 
   return (

diff --git a/examples/next/getting-started/src/pages/[...pageUri].tsx b/examples/next/getting-started/src/pages/[...pageUri].tsx
@@ -1,39 +1,16 @@
-import { getNextStaticProps, client, is404 } from '@wpengine/headless-next';
+import { getNextStaticProps, is404 } from '@wpengine/headless-next';
 import { Footer, Header, Hero } from 'components';
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
-import type { Page as PageType } from '@wpengine/headless-core';
+import { client, Page as PageType  } from 'client';
 
 export interface PageProps {
   page: PageType | PageType['preview']['node'] | null | undefined;
-  preview?: boolean;
 }
 
-export function PageComponent({ page, preview }: PageProps) {
-  const { usePage, useGeneralSettings, useQuery } = client();
+export function PageComponent({ page }: PageProps) {
+  const { useGeneralSettings } = client;
   const generalSettings = useGeneralSettings();
-  const { isLoading } = useQuery().$state;
-
-  if (preview && (typeof window === 'undefined' || isLoading)) {
-    return (
-      <>
-        <Header
-          title={generalSettings.title}
-          description={generalSettings.description}
-        />
-
-        <Hero title="Loading..." />
-
-        <main className="content content-single">
-          <div className="wrap">
-            <div>Loading...</div>
-          </div>
-        </main>
-
-        <Footer copyrightHolder={generalSettings.title} />
-      </>
-    );
-  }
 
   return (
     <>
@@ -65,21 +42,22 @@ export function PageComponent({ page, preview }: PageProps) {
 }
 
 export default function Page() {
-  const { usePage, useGeneralSettings } = client();
+  const { usePage } = client;
   const page = usePage();
 
   return <PageComponent page={page} />;
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
-  if (await is404(context)) {
+  if (await is404(client, context)) {
     return {
       notFound: true,
     };
   }
 
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
 

diff --git a/examples/next/getting-started/src/pages/_app.tsx b/examples/next/getting-started/src/pages/_app.tsx
@@ -3,20 +3,20 @@ import { HeadlessProvider } from '@wpengine/headless-next';
 import 'normalize.css/normalize.css';
 import React from 'react';
 import 'scss/main.scss';
+import { client } from 'client';
+import { AppProps } from 'next/dist/next-server/lib/router/router';
 
 headlessConfig({
   wpUrl: process.env.WORDPRESS_URL || process.env.NEXT_PUBLIC_WORDPRESS_URL,
   apiClientSecret: process.env.WP_HEADLESS_SECRET,
 });
 
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
-      <HeadlessProvider pageProps={pageProps}>
+      <HeadlessProvider client={client} pageProps={pageProps}>
         <Component {...pageProps} />
       </HeadlessProvider>
     </>
   );
 }
-
-export default MyApp;
diff --git a/...t/getting-started/src/pages/category/[categorySlug]/[paginationTerm]/[categoryCursor].tsx b/...t/getting-started/src/pages/category/[categorySlug]/[paginationTerm]/[categoryCursor].tsx
@@ -1,6 +1,7 @@
 import { GetStaticPropsContext } from 'next';
 import Page from 'pages/category/[categorySlug]';
 import { getNextStaticProps } from '@wpengine/headless-next';
+import { client } from 'client';
 
 export default Page;
 
@@ -14,6 +15,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
 

diff --git a/examples/next/getting-started/src/pages/category/[categorySlug]/index.tsx b/examples/next/getting-started/src/pages/category/[categorySlug]/index.tsx
@@ -1,13 +1,14 @@
-import { client, getNextStaticProps, is404 } from '@wpengine/headless-next';
+import { getNextStaticProps, is404 } from '@wpengine/headless-next';
 import Head from 'next/head';
 import { Header, Footer, Posts, Pagination } from 'components';
 import { GetStaticPropsContext } from 'next';
 import { useRouter } from 'next/router';
+import { client } from 'client';
 
 const POSTS_PER_PAGE = 6;
 
 export default function Page() {
-  const { useGeneralSettings, usePosts, useCategory } = client();
+  const { useGeneralSettings, usePosts, useCategory } = client;
   const { query = {} } = useRouter();
   const { categorySlug, paginationTerm, categoryCursor } = query;
   const generalSettings = useGeneralSettings();
@@ -52,14 +53,15 @@ export default function Page() {
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
-  if (await is404(context)) {
+  if (await is404(client, context)) {
     return {
       notFound: true,
     };
   }
 
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
 

diff --git a/examples/next/getting-started/src/pages/custom-page.tsx b/examples/next/getting-started/src/pages/custom-page.tsx
@@ -1,10 +1,11 @@
-import { getNextStaticProps, client } from '@wpengine/headless-next';
+import { getNextStaticProps } from '@wpengine/headless-next';
+import { client } from 'client';
 import { Footer, Header, Hero } from 'components';
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 
 export default function Page() {
-  const { useGeneralSettings } = client();
+  const { useGeneralSettings } = client;
   const generalSettings = useGeneralSettings();
 
   return (
@@ -44,5 +45,6 @@ export default function Page() {
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
diff --git a/examples/next/getting-started/src/pages/index.tsx b/examples/next/getting-started/src/pages/index.tsx
@@ -1,12 +1,14 @@
-import { client, getNextStaticProps } from '@wpengine/headless-next';
+import { getNextStaticProps } from '@wpengine/headless-next';
+
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import React from 'react';
 import { CTA, Footer, Header, Hero, Posts } from 'components';
 import styles from 'scss/pages/home.module.scss';
+import { client } from 'client';
 
 export default function Page() {
-  const { usePosts, useGeneralSettings } = client();
+  const { usePosts, useGeneralSettings } = client;
   const generalSettings = useGeneralSettings();
   const posts = usePosts({
     first: 6,
@@ -136,5 +138,6 @@ export default function Page() {
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
diff --git a/examples/next/getting-started/src/pages/posts/[postSlug]/[postCursor].tsx b/examples/next/getting-started/src/pages/posts/[postSlug]/[postCursor].tsx
@@ -1,6 +1,7 @@
 import { getNextStaticProps } from '@wpengine/headless-next';
 import { GetStaticPropsContext } from 'next';
 import Page from '..';
+import { client } from 'client';
 
 export default Page;
 
@@ -15,6 +16,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
 

diff --git a/...ng-started/src/pages/posts/[postSlug].tsx → ...rted/src/pages/posts/[postSlug]/index.tsx b/...ng-started/src/pages/posts/[postSlug].tsx → ...rted/src/pages/posts/[postSlug]/index.tsx
@@ -1,39 +1,16 @@
-import { getNextStaticProps, client, is404 } from '@wpengine/headless-next';
+import { getNextStaticProps, is404 } from '@wpengine/headless-next';
+import { client, Post } from 'client';
 import { Footer, Header, Hero } from 'components';
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
-import type { Post } from '@wpengine/headless-core';
 
 export interface PostProps {
   post: Post | Post['preview']['node'] | null | undefined;
-  preview?: boolean;
 }
 
-export function PostComponent({ post, preview }: PostProps) {
-  const { useGeneralSettings, useQuery } = client();
+export function PostComponent({ post }: PostProps) {
+  const { useGeneralSettings } = client;
   const generalSettings = useGeneralSettings();
-  const { isLoading } = useQuery().$state;
-
-  if (preview && (typeof window === 'undefined' || isLoading)) {
-    return (
-      <>
-        <Header
-          title={generalSettings.title}
-          description={generalSettings.description}
-        />
-
-        <Hero title="Loading..." />
-
-        <main className="content content-single">
-          <div className="wrap">
-            <div>Loading...</div>
-          </div>
-        </main>
-
-        <Footer copyrightHolder={generalSettings.title} />
-      </>
-    );
-  }
 
   return (
     <>
@@ -65,21 +42,22 @@ export function PostComponent({ post, preview }: PostProps) {
 }
 
 export default function Page() {
-  const { usePost } = client();
+  const { usePost } = client;
   const post = usePost();
 
   return <PostComponent post={post} />;
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
-  if (await is404(context)) {
+  if (await is404(client, context)) {
     return {
       notFound: true,
     };
   }
 
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }
 

diff --git a/examples/next/getting-started/src/pages/posts/index.tsx b/examples/next/getting-started/src/pages/posts/index.tsx
@@ -1,4 +1,5 @@
-import { getNextStaticProps, client } from '@wpengine/headless-next';
+import { getNextStaticProps } from '@wpengine/headless-next';
+import { client, OrderEnum, PostObjectsConnectionOrderbyEnum } from 'client';
 import { Footer, Header, Pagination, Posts } from 'components';
 import { GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -11,14 +12,14 @@ const POSTS_PER_PAGE = 6;
 export default function Page() {
   const { query = {} } = useRouter();
   const { postSlug, postCursor } = query;
-  const { usePosts, useGeneralSettings, useQuery } = client();
+  const { usePosts, useGeneralSettings, useQuery } = client;
   const generalSettings = useGeneralSettings();
   const isBefore = postSlug === 'before';
   const posts = usePosts({
     after: !isBefore ? (postCursor as string) : undefined,
     before: isBefore ? (postCursor as string) : undefined,
     first: !isBefore ? POSTS_PER_PAGE : undefined,
-    last: isBefore ? POSTS_PER_PAGE : undefined,
+    last: isBefore ? POSTS_PER_PAGE : undefined
   });
 
   if (useQuery().$state.isLoading) {
@@ -57,5 +58,6 @@ export default function Page() {
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getNextStaticProps(context, {
     Page,
+    client,
   });
 }