doc: (#279) adding project with custom client

examples/next/custom-client/.env.local.sample

@@ -0,0 +1,15 @@
+# Either WORDPRESS_URL or NEXT_PUBLIC_WORDPRESS_URL need to be populated. Not both!
+#
+# Setting WORDPRESS_URL instead of NEXT_PUBLIC_WORDPRESS_URL will limit requests to the WordPress backend
+# to only come from the Node.js server.
+#
+# Setting NEXT_PUBLIC_WORDPRESS_URL instead of WORDPRESS_URL will allow requests to come from the client-side which may
+# reduce site performance and put extra load on the WordPress backend.
+#
+# NOTE: In order for previews to work you must use NEXT_PUBLIC_WORDPRESS_URL
+
+NEXT_PUBLIC_WORDPRESS_URL=https://headlessfw.wpengine.com
+# WORDPRESS_URL=https://headlessfw.wpengine.com
+
+# Plugin secret found in WordPress Settings->Headless
+WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

examples/next/custom-client/.env.test.sample

@@ -0,0 +1,13 @@
+# Either WORDPRESS_URL or NEXT_PUBLIC_WORDPRESS_URL need to be populated. Not both!
+#
+# (Recommended) Setting WORDPRESS_URL instead of NEXT_PUBLIC_WORDPRESS_URL will limit requests to the WordPress backend
+# to only come from the Node.js server.
+#
+# Setting NEXT_PUBLIC_WORDPRESS_URL instead of WORDPRESS_URL will allow requests to come from the client-side which may
+# reduce site performance and put extra load on the WordPress backend.
+
+NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8080
+# WORDPRESS_URL=http://localhost:8080
+
+# Plugin secret found in WordPress Settings->Headless
+WP_HEADLESS_SECRET=00000000-0000-0000-0000-000000000001

examples/next/custom-client/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

examples/next/custom-client/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/next/custom-client/README.md

@@ -0,0 +1,14 @@
+# Next.js Headless WordPress Getting Started Example
+
+## Setup
+
+See the [setup steps](https://github.com/wpengine/headless-framework#quick-start).
+
+## Run it
+
+```bash
+npm install
+npm run dev
+```
+
+[http://localhost:3000]()

examples/next/custom-client/gqless.config.js

@@ -0,0 +1,16 @@
+/**
+ * @type {import("@gqless/cli").GQlessConfig}
+ */
+ const config = {
+  react: false,
+  scalarTypes: { DateTime: "string" },
+  introspection: {
+    endpoint: "http://wptest.local/graphql",
+    headers: {},
+  },
+  destination: "./src/api/client/index.ts",
+  subscriptions: false,
+  javascriptOutput: false,
+};
+
+module.exports = config;

examples/next/custom-client/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/next/custom-client/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "next-headless-custom-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "clean": "rimraf .next node_modules",
+    "lint": "next lint",
+    "generate": "gqless generate",
+    "wpe-build": "next build"
+  },
+  "dependencies": {
+    "@wpengine/headless-core": "^0.6.12",
+    "@wpengine/headless-next": "^0.6.12",
+    "next": "^11.0.0",
+    "normalize.css": "^8.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sass": "^1.35.1"
+  },
+  "devDependencies": {
+    "@gqless/cli": "^2.0.16",
+    "@types/react": "^17.0.11",
+    "eslint": "^7.28.0",
+    "eslint-config-next": "^11.0.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.3.4"
+  }
+}

examples/next/custom-client/src/api/client/index.ts

@@ -0,0 +1,33 @@
+/**
+ * GQLESS: You can safely modify this file and Query Fetcher based on your needs
+ */
+
+import { createClient, GQlessClient } from 'gqless';
+import { queryFetcher } from '@wpengine/headless-core';
+import { client as reactClient } from '@wpengine/headless-next';
+import {
+  generatedSchema,
+  scalarsEnumsHash,
+  GeneratedSchema,
+  SchemaObjectTypes,
+  SchemaObjectTypesNames,
+} from './schema.generated';
+
+export const customClient = createClient<
+  GeneratedSchema,
+  SchemaObjectTypesNames,
+  SchemaObjectTypes
+>({
+  schema: generatedSchema,
+  scalarsEnumsHash,
+  queryFetcher,
+});
+
+export type Client = GQlessClient<GeneratedSchema>;
+
+export function client() {
+  // @ts-ignore
+  return reactClient<GeneratedSchema>();
+}
+
+export * from './schema.generated';