Skip to content

Commit 01cc2a6

Browse files
authored
Update README.md
1 parent 91af98e commit 01cc2a6

File tree

1 file changed

+67
-81
lines changed

1 file changed

+67
-81
lines changed

README.md

Lines changed: 67 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,89 @@
1-
# TSDX User Guide
1+
# GraphQL Cache Control
22

3-
Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
3+
This package offers you a simple decorator to set cache control on your resolvers.
44

5-
> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`.
5+
## Installation
66

7-
> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript)
7+
On Yarn:
88

9-
## Commands
10-
11-
TSDX scaffolds your new library inside `/src`.
12-
13-
To run TSDX, use:
14-
15-
```bash
16-
npm start # or yarn start
9+
```shell
10+
yarn add @exonest/graphql-cache-control
1711
```
1812

19-
This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
20-
21-
To do a one-off build, use `npm run build` or `yarn build`.
22-
23-
To run tests, use `npm test` or `yarn test`.
24-
25-
## Configuration
26-
27-
Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
13+
On NPM:
2814

29-
### Jest
30-
31-
Jest tests are set up to run with `npm test` or `yarn test`.
32-
33-
### Bundle Analysis
34-
35-
[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.
36-
37-
#### Setup Files
38-
39-
This is the folder structure we set up for you:
40-
41-
```txt
42-
/src
43-
index.tsx # EDIT THIS
44-
/test
45-
blah.test.tsx # EDIT THIS
46-
.gitignore
47-
package.json
48-
README.md # EDIT THIS
49-
tsconfig.json
15+
```shell
16+
npm install @exonest/graphql-cache-control
5017
```
5118

52-
### Rollup
53-
54-
TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
19+
## Usage
5520

56-
### TypeScript
21+
To use caching, you are gonna need these packages too:
5722

58-
`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
59-
60-
## Continuous Integration
61-
62-
### GitHub Actions
63-
64-
Two actions are added by default:
65-
66-
- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
67-
- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
68-
69-
## Optimizations
23+
```
24+
@nestjs/graphql
25+
apollo-server-core
26+
apollo-server-plugin-response-cache
27+
```
7028

71-
Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
29+
First, register graphql module and cache plugins in your app module:
7230

73-
```js
74-
// ./types/index.d.ts
75-
declare var __DEV__: boolean;
31+
```ts
32+
import responseCachePlugin from 'apollo-server-plugin-response-cache';
33+
import { ApolloServerPluginCacheControl } from 'apollo-server-core/dist/plugin/cacheControl';
7634

77-
// inside your code...
78-
if (__DEV__) {
79-
console.log('foo');
35+
GraphQLModule.forRoot({
36+
// ...
37+
plugins: [
38+
ApolloServerPluginCacheControl({ defaultMaxAge: 5 }), // optional
39+
responseCachePlugin(),
40+
],
41+
}),
42+
```
43+
> To add Redis or other caching stores, check [Apollo's docs](https://www.apollographql.com/docs/apollo-server/performance/caching/#in-memory-cache-setup)
44+
45+
Then, you can use the decorator on your queries and field resolvers:
46+
47+
```ts
48+
import { CacheControl } from '@exonest/graphql-cache-control';
49+
50+
@Resolver((type) => Post)
51+
export class PostResolver {
52+
@Query(() => [Post])
53+
@CacheControl({ maxAge: 10 })
54+
posts() {
55+
// database calls
56+
return posts;
57+
}
58+
59+
@ResolveField(() => User)
60+
@CacheControl({ inheritMaxAge: true })
61+
owner() {
62+
// database calls
63+
return owner;
64+
}
65+
66+
@ResolveField(() => boolean)
67+
@CacheControl({ maxAge: 5, scope: "PRIVATE" })
68+
hasLiked() {
69+
// database calls
70+
return hasLiked;
71+
}
8072
}
8173
```
8274

83-
You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
84-
85-
## Module Formats
86-
87-
CJS, ESModules, and UMD module formats are supported.
88-
89-
The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
90-
91-
## Named Exports
92-
93-
Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
75+
## How The Apollo Cache Works
9476

95-
## Including Styles
77+
Please carefully read [Apollo's docs about caching](https://www.apollographql.com/docs/apollo-server/performance/caching/) to understand how caching works, since it has a set of rules for cache calculation. In a brief:
78+
>a response should only be considered cacheable if every part of that response opts in to being cacheable. At the same time, we don't think developers should have to specify cache hints for every single field in their schema.
79+
So, we follow these heuristics:
80+
Root field resolvers are extremely likely to fetch data (because these fields have no parent), so we set their default maxAge to 0 to avoid automatically caching data that shouldn't be cached.
81+
Resolvers for other non-scalar fields (objects, interfaces, and unions) also commonly fetch data because they contain arbitrarily many fields. Consequently, we also set their default maxAge to 0.
82+
Resolvers for scalar, non-root fields rarely fetch data and instead usually populate data via the parent argument. Consequently, these fields inherit their default maxAge from their parent to reduce schema clutter.
9683

97-
There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
9884

99-
For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
85+
## Connections (Pagination)
10086

101-
## Publishing to NPM
87+
If you happen to use [@exonest/graphql-connections](https://github.com/exonest/graphql-connections), `edges` and `node` will automatically inherit cache control from their parents. but otherwise you should set `inheritMaxAge` on your connection fields to prevent connections from cancelling your cache.
10288

103-
We recommend using [np](https://github.com/sindresorhus/np).
89+
Why you should do that? because you probably don't want your connections to cancel your cache control. ([learn more](https://www.apollographql.com/docs/apollo-server/performance/caching/#default-maxage))

0 commit comments

Comments
 (0)