Skip to content

Commit a4f9834

Browse files
FreeWallFreeWall
committed
add options
1 parent c53e6fc commit a4f9834

File tree

6 files changed

+160
-83
lines changed

6 files changed

+160
-83
lines changed

‎README.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,29 @@ const link = ApolloLink.from([
2525

2626
const client = new ApolloClient({
2727
link,
28-
cache: new InMemoryCache(),
28+
// ...
29+
});
30+
```
31+
32+
### Options
33+
34+
```js
35+
// default values:
36+
new ConsoleLoggerLink({
37+
colors: {
38+
query: {
39+
request: '#E17E00',
40+
response: '#A65D00',
41+
},
42+
mutation: {
43+
request: '#E10098',
44+
response: '#A5006F',
45+
},
46+
},
47+
timings: true,
2948
});
3049
```
3150

3251
## Sample output
3352

34-
![image](/docs/sample-output.png)
53+
![image](/docs/sample-log-output.png)

‎docs/sample-log-output.png

51.8 KB
Loading

‎docs/sample-output.png

-51.8 KB
Binary file not shown.

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freewall/apollo-console-logger",
3-
"version": "0.1.6",
3+
"version": "0.2.0",
44
"license": "MIT",
55
"author": "Michal Vaněk",
66
"private": false,
@@ -11,7 +11,7 @@
1111
"scripts": {
1212
"build": "tsup src/index.ts --format cjs,esm --dts",
1313
"lint": "tsc",
14-
"clean": "rimraf src docs .github",
14+
"clean": "rimraf src docs .github .editorconfig .prettierrc .gitignore tsconfig.json",
1515
"release": "npm run lint && npm run build && npm run clean"
1616
},
1717
"dependencies": {

‎src/index.ts

Lines changed: 135 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,57 @@ import {
1212
} from 'graphql';
1313
import { print } from 'graphql/language/printer';
1414

15-
const operationTypes = {
16-
[OperationTypeNode.QUERY]: {
17-
request: '#E10098',
18-
response: '#A5006F',
19-
},
20-
[OperationTypeNode.MUTATION]: {
21-
request: '#E17E00',
22-
response: '#A65D00',
23-
},
24-
[OperationTypeNode.SUBSCRIPTION]: {
25-
request: '#E1B600',
26-
response: '#A68600',
15+
const defaultOptions: ConsoleLoggerLinkOptions = {
16+
colors: {
17+
[OperationTypeNode.QUERY]: {
18+
request: '#E17E00',
19+
response: '#A65D00',
20+
},
21+
[OperationTypeNode.MUTATION]: {
22+
request: '#E10098',
23+
response: '#A5006F',
24+
},
25+
/*[OperationTypeNode.SUBSCRIPTION]: {
26+
request: '#E1B600',
27+
response: '#A68600',
28+
},*/
2729
},
30+
timings: true,
2831
};
2932

33+
interface ConsoleLoggerLinkOptions {
34+
colors?: {
35+
[OperationTypeNode.QUERY]?: {
36+
request: string;
37+
response: string;
38+
};
39+
[OperationTypeNode.MUTATION]?: {
40+
request: string;
41+
response: string;
42+
};
43+
};
44+
timings?: boolean;
45+
}
46+
3047
export class ConsoleLoggerLink extends ApolloLink {
3148
private logId = 0;
49+
private options: ConsoleLoggerLinkOptions;
50+
51+
constructor(options?: ConsoleLoggerLinkOptions) {
52+
super();
53+
54+
this.options = {
55+
colors: {
56+
[OperationTypeNode.QUERY]:
57+
options?.colors?.[OperationTypeNode.QUERY] ??
58+
defaultOptions?.colors?.[OperationTypeNode.QUERY],
59+
[OperationTypeNode.MUTATION]:
60+
options?.colors?.[OperationTypeNode.MUTATION] ??
61+
defaultOptions?.colors?.[OperationTypeNode.MUTATION],
62+
},
63+
timings: options?.timings ?? true,
64+
};
65+
}
3266

3367
request(
3468
operation: Operation,
@@ -42,81 +76,105 @@ export class ConsoleLoggerLink extends ApolloLink {
4276
operation.query,
4377
operation.operationName,
4478
);
45-
if (operationAst) {
46-
logRequest(operation, operationAst, operationId);
79+
80+
if (
81+
operationAst &&
82+
operationAst.operation != OperationTypeNode.SUBSCRIPTION
83+
) {
84+
this._logRequest(operation, operationAst, operationId);
4785
}
4886

49-
const startTime = Date.now();
87+
const startTime = this.options.timings ? Date.now() : 0;
5088

5189
return forward(operation).map((result) => {
52-
if (operationAst) {
53-
logResponse(operation, operationAst, result, startTime, operationId);
90+
if (
91+
operationAst &&
92+
operationAst.operation != OperationTypeNode.SUBSCRIPTION
93+
) {
94+
this._logResponse(
95+
operation,
96+
operationAst,
97+
result,
98+
startTime,
99+
operationId,
100+
);
54101
}
55102
return result;
56103
});
57104
}
58-
}
59105

60-
function logRequest(
61-
operation: Operation,
62-
operationAst: OperationDefinitionNode,
63-
operationId: number,
64-
) {
65-
console.debug(
66-
'%c >> ' +
67-
operationAst.operation +
68-
' #' +
69-
operationId +
70-
' %c %c' +
71-
operation.operationName +
72-
'%c',
73-
'background: ' +
74-
operationTypes[operationAst.operation].request +
75-
'; padding: 2px; color: #ffffff; border-radius: 3px;',
76-
undefined,
77-
'color: inherit; font-weight: bold;',
78-
undefined,
79-
{
80-
query: print(operationAst),
81-
...(isEmpty(operation.variables)
82-
? null
83-
: { variables: operation.variables }),
84-
...(isEmpty(operation.getContext().headers)
85-
? null
86-
: { headers: operation.getContext().headers }),
87-
},
88-
);
89-
}
106+
protected _logRequest(
107+
operation: Operation,
108+
operationAst: OperationDefinitionNode,
109+
operationId: number,
110+
) {
111+
console.debug(
112+
'%c >> ' +
113+
operationAst.operation +
114+
' #' +
115+
operationId +
116+
' %c %c' +
117+
operation.operationName +
118+
'%c',
119+
'background: ' +
120+
this.options.colors?.[
121+
operationAst.operation as
122+
| OperationTypeNode.QUERY
123+
| OperationTypeNode.MUTATION
124+
]?.request +
125+
'; padding: 2px; color: #ffffff; border-radius: 3px;',
126+
undefined,
127+
'color: inherit; font-weight: bold;',
128+
undefined,
129+
{
130+
query: print(operationAst),
131+
...(isEmpty(operation.variables)
132+
? null
133+
: { variables: operation.variables }),
134+
...(isEmpty(operation.getContext().headers)
135+
? null
136+
: { headers: operation.getContext().headers }),
137+
},
138+
);
139+
}
140+
141+
protected _logResponse(
142+
operation: Operation,
143+
operationAst: OperationDefinitionNode,
144+
results: FetchResult,
145+
startTime: number,
146+
operationId: number,
147+
) {
148+
const success = (results.errors?.length ?? 0) < 1;
90149

91-
function logResponse(
92-
operation: Operation,
93-
operationAst: OperationDefinitionNode,
94-
results: FetchResult,
95-
startTime: number,
96-
operationId: number,
97-
) {
98-
const success = (results.errors?.length ?? 0) < 1;
99-
100-
console.debug(
101-
'%c << ' +
102-
operationAst.operation +
103-
' #' +
104-
operationId +
105-
' %c ' +
106-
(!success ? '⚠️ ' : '') +
107-
`%c${operation.operationName}%c %c${Date.now() - startTime} ms`,
108-
'background: ' +
109-
operationTypes[operationAst.operation].response +
110-
'; padding: 2px; color: #ffffff; border-radius: 3px;',
111-
undefined,
112-
'font-weight: bold;' +
113-
(success
114-
? 'color: #008000;'
115-
: 'color: #CC0000; text-decoration: underline; text-decoration-style: dotted'),
116-
undefined,
117-
'background: #e4e4e4; padding: 2px 4px; border-radius: 3px; font-size: 11px;',
118-
results,
119-
);
150+
console.debug(
151+
'%c << ' +
152+
operationAst.operation +
153+
' #' +
154+
operationId +
155+
' %c ' +
156+
(!success ? '⚠️ ' : '') +
157+
`%c${operation.operationName}%c` +
158+
(this.options.timings ? ` %c${Date.now() - startTime} ms` : '%c'),
159+
'background: ' +
160+
this.options.colors?.[
161+
operationAst.operation as
162+
| OperationTypeNode.QUERY
163+
| OperationTypeNode.MUTATION
164+
]?.response +
165+
'; padding: 2px; color: #ffffff; border-radius: 3px;',
166+
undefined,
167+
'font-weight: bold;' +
168+
(success
169+
? 'color: #008000;'
170+
: 'color: #CC0000; text-decoration: underline; text-decoration-style: dotted'),
171+
undefined,
172+
this.options.timings
173+
? 'background: #e4e4e4; padding: 2px 4px; border-radius: 3px; font-size: 11px;'
174+
: undefined,
175+
results,
176+
);
177+
}
120178
}
121179

122180
function isEmpty(value: unknown) {

0 commit comments

Comments
 (0)