Skip to content

Commit c3680e0

Browse files
ahuseynahuseyn
committed
add logging example
1 parent 621cf42 commit c3680e0

File tree

25 files changed

+3897
-0
lines changed

25 files changed

+3897
-0
lines changed

‎plugins/wpgraphql-logging/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,6 @@ tests/_data/
5656

5757
# Playwright outputs
5858
artifacts
59+
60+
# Keep example SQL files
61+
!examples/**/*.sql

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/.wp-env.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"phpVersion": "8.1",
3+
"plugins": [
4+
"https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
5+
"https://github.com/wpengine/hwptoolkit/releases/latest/download/wpgraphql-logging.zip"
6+
],
7+
"config": {
8+
"WP_DEBUG": true,
9+
"SCRIPT_DEBUG": false,
10+
"GRAPHQL_DEBUG": true,
11+
"WP_DEBUG_LOG": true,
12+
"WP_DEBUG_DISPLAY": false,
13+
"SAVEQUERIES": false
14+
},
15+
"mappings": {
16+
"db": "./wp-env/db",
17+
"wp-content/uploads": "./wp-env/uploads",
18+
".htaccess": "./wp-env/setup/.htaccess"
19+
},
20+
"lifecycleScripts": {
21+
"afterStart": "wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
22+
}
23+
}

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/README.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: "WPGraphQL Logging with Next.js Pages Router"
3+
description: "This demonstrates the usage of WPGraphQL Logging with Next.js Pages Router and WPGraphQL. It shows how GraphQL queries are logged and can be viewed, filtered, and exported from the WordPress admin."
4+
---
5+
6+
# Example: WPGraphQL Logging with Next.js
7+
8+
## Overview
9+
10+
This example shows the WPGraphQL Logging plugin in action. The example uses a simple Next.js application that makes various GraphQL queries to WordPress, and demonstrates how those queries are logged and can be monitored through the WordPress admin interface.
11+
12+
The example includes a wp-env setup, which will allow you to build and start this example quickly. With this wp-env setup, you don't need to have a separate WordPress instance or demo data to inspect the example.
13+
14+
## What does this example do
15+
16+
1. Fetch and display a list of posts from WordPress using GraphQL
17+
2. Fetch and display individual posts and pages using GraphQL with variables
18+
3. Automatically log all GraphQL queries to the WordPress database
19+
4. View logged queries in the WordPress admin (GraphQL Logs → All Logs)
20+
5. Filter logs by date range and log level
21+
6. Export logs to CSV format
22+
7. Configured WordPress instance with demo data and required plugins, using wp-env
23+
24+
## Screenshots
25+
26+
|| | | |
27+
|| :--------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
28+
|| ![Admin logs view](./screenshots/admin-logs-view.png) <br> View all logs | ![Log detail](./screenshots/log-detail.png) <br> Individual log details | ![Filter logs](./screenshots/log-filters.png) <br> Filter and export logs |
29+
30+
## Project Structure
31+
32+
```
33+
├── example-app
34+
│ └── src
35+
│ ├── components # Reusable React components
36+
│ ├── lib
37+
│ │ └── client.js # Apollo client instance
38+
│ ├── pages
39+
│ │ ├── index.js # Home page - list of posts
40+
│ │ ├── posts.js # Posts list with pagination
41+
│ │ └── [slug].js # Dynamic route for single post/page
42+
│ └── styles
43+
│ └── globals.css # Global styles
44+
├── .wp-env.json # wp-env configuration file
45+
└── wp-env
46+
├── db
47+
│ └── database.sql # WordPress database including all demo data for the example
48+
└── uploads.zip # WordPress content to be used by wp-env
49+
```
50+
51+
## Running the example with wp-env
52+
53+
### Prerequisites
54+
55+
- Node.js (v18+ recommended)
56+
- [Docker](https://www.docker.com/) (if you plan on running the example see details below)
57+
58+
**Note** Please make sure you have all prerequisites installed as mentioned above and Docker running (`docker ps`)
59+
60+
### 1. Setup Repository and Packages
61+
62+
- Clone the repo `git clone https://github.com/wpengine/hwptoolkit.git`
63+
- Install packages `cd hwptoolkit && npm install`
64+
65+
### 2. Build and start the application
66+
67+
- `cd plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs`
68+
- Then run `npm run example:build` will build and start your application.
69+
70+
This starts the wp-env instance and frontend application.
71+
72+
> [!IMPORTANT]
73+
> After the wp-env instance starts, ensure that all installed plugins are activated for this example to work properly.
74+
75+
| Frontend | Admin |
76+
| ---------------------- | ------------------------------- |
77+
| http://localhost:3000/ | http://localhost:8888/wp-admin/ |
78+
79+
> **Note:** The login details for the admin is username "admin" and password "password"
80+
81+
### 3. Create environment variables for Next.js
82+
83+
Create a `.env.local` file in the `example-app` directory with the following content:
84+
85+
```bash
86+
NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888
87+
```
88+
89+
This tells the Next.js application where to find your WordPress GraphQL endpoint.
90+
91+
### 4. Explore the logged queries
92+
93+
1. Navigate to the Next.js frontend at http://localhost:3000/
94+
2. Browse through the posts by clicking on them
95+
3. Visit http://localhost:3000/posts to see a different query
96+
4. Login to WordPress admin at http://localhost:8888/wp-admin/
97+
5. Go to **GraphQL Logs → All Logs** to see all logged queries
98+
6. Click on any log entry to see detailed information including:
99+
- Query text and variables
100+
- Response data
101+
- Execution time and memory usage
102+
- Request headers and context
103+
7. Use the filters to narrow down logs by date range or log level
104+
8. Export logs to CSV for offline analysis
105+
106+
### 5. Configure logging settings (Optional)
107+
108+
Navigate to **GraphQL Logs → Settings** in the WordPress admin to configure:
109+
110+
- Enable/disable logging
111+
- Adjust data sampling rate (default is 100% for this example)
112+
- Configure data retention period
113+
- Set up data sanitization rules
114+
- Exclude specific queries from logging
115+
116+
If you want to learn more about the logging plugin, check out [the documentation](../../../docs/plugins/wpgraphql-logging/index.md).
117+
118+
### Command Reference
119+
120+
| Command | Description |
121+
| --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
122+
| `example:build` | Prepares the environment by unzipping images, starting WordPress, importing the database, and starting the application. |
123+
| `example:dev` | Runs the Next.js development server. |
124+
| `example:dev:install` | Installs the required Next.js packages. |
125+
| `example:start` | Starts WordPress and the Next.js development server. |
126+
| `example:stop` | Stops the WordPress environment. |
127+
| `example:prune` | Rebuilds and restarts the application by destroying and recreating the WordPress environment. |
128+
| `wp:start` | Starts the WordPress environment. |
129+
| `wp:stop` | Stops the WordPress environment. |
130+
| `wp:destroy` | Completely removes the WordPress environment. |
131+
| `wp:db:query` | Executes a database query within the WordPress environment. |
132+
| `wp:db:export` | Exports the WordPress database to `wp-env/db/database.sql`. |
133+
| `wp:db:import` | Imports the WordPress database from `wp-env/db/database.sql`. |
134+
| `wp:images:unzip` | Extracts the WordPress uploads directory. |
135+
| `wp:images:zip` | Compresses the WordPress uploads directory. |
136+
137+
> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see <https://www.npmjs.com/package/@wordpress/env> for more details on how to use or configure `wp-env`.
138+
139+
### Database access
140+
141+
If you need database access add the following to your `.wp-env.json`: `"phpmyadminPort": 11111,` (where port 11111 is not allocated).
142+
143+
You can check if a port is free by running `lsof -i :11111`

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts
42+
43+
package-lock.json

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/eslint.config.mjs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { FlatCompat } from "@eslint/eslintrc";
2+
import js from "@eslint/js";
3+
import { dirname } from "path";
4+
import { fileURLToPath } from "url";
5+
6+
const __filename = fileURLToPath(import.meta.url);
7+
const __dirname = dirname(__filename);
8+
9+
const compat = new FlatCompat({
10+
baseDirectory: __dirname,
11+
recommendedConfig: js.configs.recommended,
12+
});
13+
14+
const eslintConfig = [
15+
...compat.config({
16+
extends: ["eslint:recommended", "next/core-web-vitals"],
17+
}),
18+
];
19+
20+
export default eslintConfig;

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/jsconfig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./src/*"]
5+
}
6+
}
7+
}

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/next.config.mjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
};
5+
6+
export default nextConfig;

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "wpgraphql-logging-nextjs-example-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@apollo/client": "^3.13.5",
13+
"next": "^15.5.2",
14+
"react": "^19.0.0",
15+
"react-dom": "^19.0.0"
16+
},
17+
"devDependencies": {
18+
"@eslint/eslintrc": "^3",
19+
"@tailwindcss/postcss": "^4",
20+
"eslint": "^9",
21+
"eslint-config-next": "15.2.4",
22+
"tailwindcss": "^4"
23+
}
24+
}

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const config = {
2+
plugins: ["@tailwindcss/postcss"],
3+
};
4+
5+
export default config;

‎plugins/wpgraphql-logging/examples/wpgraphql-logging-nextjs/example-app/public/favicon.ico‎

25.3 KB
Binary file not shown.

0 commit comments

Comments
 (0)