|
1 | | -# TSDX User Guide |
| 1 | +# GraphQL Cache Control |
2 | 2 |
|
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. |
4 | 4 |
|
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 |
6 | 6 |
|
7 | | -> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript) |
| 7 | +On Yarn: |
8 | 8 |
|
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 |
17 | 11 | ``` |
18 | 12 |
|
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: |
28 | 14 |
|
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 |
50 | 17 | ``` |
51 | 18 |
|
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 |
55 | 20 |
|
56 | | -### TypeScript |
| 21 | +To use caching, you are gonna need these packages too: |
57 | 22 |
|
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 | +``` |
70 | 28 |
|
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: |
72 | 30 |
|
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'; |
76 | 34 |
|
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 | + } |
80 | 72 | } |
81 | 73 | ``` |
82 | 74 |
|
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 |
94 | 76 |
|
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. |
96 | 83 |
|
97 | | -There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like. |
98 | 84 |
|
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) |
100 | 86 |
|
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. |
102 | 88 |
|
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