# @n1ru4l/graphql-live-query-patch-jsondiffpatch > [![npm version](https://img.shields.io/npm/v/@n1ru4l/graphql-live-query-patch-jsondiffpatch.svg)](https://www.npmjs.com/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch) [![npm downloads](https://img.shields.io/npm/dm/@n1ru4l/graphql-live-query-patc Latest version **0.9.0** (published 2026-07-20) · MIT license · 0 weekly downloads ## Install ```sh npm install @n1ru4l/graphql-live-query-patch-jsondiffpatch pnpm add @n1ru4l/graphql-live-query-patch-jsondiffpatch yarn add @n1ru4l/graphql-live-query-patch-jsondiffpatch bun add @n1ru4l/graphql-live-query-patch-jsondiffpatch ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.9.0 | | Published | 2026-07-20 | | First published | 2021-06-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 14 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 443 | | Author | n1ru4l | | Maintainers | n1ru4l | | Keywords | graphql, query, live, real-time | ## Links - npm: https://www.npmjs.com/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch - Repository: https://github.com/n1ru4l/graphql-live-query - Homepage: https://github.com/n1ru4l/graphql-live-queries#readme - Issues: https://github.com/n1ru4l/graphql-live-query/issues - npm.io page: https://npm.io/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch ## Dependencies (2) - [@n1ru4l/json-patch-plus](https://npm.io/package/@n1ru4l/json-patch-plus.md) ^0.3.0 - [@n1ru4l/graphql-live-query-patch](https://npm.io/package/@n1ru4l/graphql-live-query-patch.md) ^0.8.0 ## Alternatives - [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads - [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads - [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads - [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads - [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads ## Recent versions - 0.9.0 (latest) — 2026-07-20 - 0.9.0-rc-20260720130219-41f090c3809f65d64117b705343943e437843cda (rc) — 2026-07-20 - 0.9.0-alpha-20260720125639-14552d533a10d99fe5ade90b08c0facfad626bfe (alpha) — 2026-07-20 - 0.9.0-alpha-20260720124524-d45653cebd08165a479f0429361ce3c16fd78c9b — 2026-07-20 - 0.9.0-alpha-20260720124511-240b6a46c363f4bbafde68ae0e9e891c3f6bbb5d — 2026-07-20 - 0.9.0-alpha-20260720124457-928327edc3c222db4eb01fccf303ab9eb4371973 — 2026-07-20 - 0.9.0-alpha-20260720124441-82de291d864718098034d09cd01b08d6af3e6775 — 2026-07-20 - 0.9.0-alpha-20260720124404-7f174629b0bcf2de3b7fbb5f6b17396bc569dbea — 2026-07-20 - 0.9.0-alpha-20260720124401-2a62f4d87d544f341cfbd91655d9d84a69f3696b — 2026-07-20 - 0.9.0-alpha-20260720124348-3b89a8392c5cfa595c4e9324aa1c3f95941e0bad — 2026-07-20 - 0.9.0-alpha-20260720124331-94085ecd5b7282816c848800dfaaccdf8e252c03 — 2026-07-20 - 0.9.0-alpha-20260720123954-9ecba3d81dc0d1e580ed18406d930eb5c1820b45 — 2026-07-20 - 0.9.0-alpha-4a0d9f8.0 — 2022-08-10 - 0.9.0-alpha-4f39e4d.0 — 2022-08-08 - 0.8.0 — 2022-07-29 - … 30 more at https://npm.io/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch/versions ## README # @n1ru4l/graphql-live-query-patch-jsondiffpatch [![npm version](https://img.shields.io/npm/v/@n1ru4l/graphql-live-query-patch-jsondiffpatch.svg)](https://www.npmjs.com/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch) [![npm downloads](https://img.shields.io/npm/dm/@n1ru4l/graphql-live-query-patch-jsondiffpatch.svg)](https://www.npmjs.com/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch) Smaller live query payloads with [@n1ru4l/json-patch-plus](https://github.com/n1ru4l/graphql-live-query/tree/main/packages/json-patch-plus). When having big query results JSON patches might be able to drastically reduce the payload sent to clients. Every time a new execution result is published a JSON patch is generated by diffing the previous and the next execution result. The patch operations are then sent to the client where they are applied to the initial execution result. The `@n1ru4l/json-patch-plus` produces even smaller patches than the `jsondiffpatch` package which already produces more optimized patches than the `json-patch` package and performs much better on generating patches for lists. **Query** ```graphql query post($id: ID!) @live { post(id: $id) { id title totalLikeCount } } ``` **Initial result** ```json { "data": { "post": { "id": "1", "title": "foo", "totalLikeCount": 10 } }, "revision": 1 } ``` **Patch result (increase totalLikeCount)** ```json { "patch": { "post": { "totalLikeCount": [null, 11] } }, "revision": 2 } ``` ## Install Instructions ```bash yarn add -E @n1ru4l/graphql-live-query-patch-jsondiffpatch ``` ## API ### `applyLiveQueryJSONDiffPatchGenerator` Wrap a `execute` result and apply a live query patch generator middleware. ```ts import { execute } from "graphql"; import { applyLiveQueryJSONDiffPatchGenerator } from "@n1ru4l/graphql-live-query-patch-jsondiffpatch"; import { schema } from "./schema"; const result = applyLiveQueryJSONDiffPatchGenerator( execute({ schema, operationDocument: parse(/* GraphQL */ ` query todosQuery @live { todos { id content isComplete } } `), rootValue: rootValue, contextValue: {}, variableValues: null, operationName: "todosQuery", }) ); ``` ### `applyLiveQueryJSONDiffPatch` Inflate the execution patch results on the client side. ```ts import { applyLiveQueryJSONDiffPatch } from "@n1ru4l/graphql-live-query-patch-jsondiffpatch"; const asyncIterable = applyLiveQueryJSONDiffPatch( // networkLayer.execute returns an AsyncIterable networkLayer.execute({ operation: /* GraphQL */ ` query todosQuery @live { todos { id content isComplete } } `, }) ); ``` AsyncIterators make composing async logic super easy. In case your GraphQL transport does not return a AsyncIterator you can use the [`@n1ru4l/push-pull-async-iterable-iterator`](https://www.npmjs.com/package/@n1ru4l/push-pull-async-iterable-iterator) package for wrapping the result as a AsyncIterator. ```ts import { applyLiveQueryJSONDiffPatch } from "@n1ru4l/graphql-live-query-patch-jsondiffpatch"; import { makeAsyncIterableIteratorFromSink } from "@n1ru4l/push-pull-async-iterable-iterator"; import { createClient } from "graphql-ws/lib/use/ws"; const client = createClient({ url: "ws://localhost:3000/graphql", }); const asyncIterableIterator = makeAsyncIterableIteratorFromSink((sink) => { const dispose = client.subscribe( { query: "query @live { hello }", }, { next: sink.next, error: sink.error, complete: sink.complete, } ); return () => dispose(); }); const wrappedAsyncIterableIterator = applyLiveQueryJSONDiffPatch( asyncIterableIterator ); for await (const value of asyncIterableIterator) { console.log(value); } ``` ### `applyLiveQueryJSONDiffPatch` In most cases using `createApplyLiveQueryPatchGenerator` is the best solution. However, some special implementations might need a more flexible and direct way of applying the patch middleware. ```ts import { execute } from "graphql"; import { applyLiveQueryJSONDiffPatch } from "@n1ru4l/graphql-live-query-patch-jsondiffpatch"; import { schema } from "./schema"; execute({ schema, operationDocument: parse(/* GraphQL */ ` query todosQuery @live { todos { id content isComplete } } `), rootValue: rootValue, contextValue: {}, variableValues: null, operationName: "todosQuery", }).then(async (result) => { if (isAsyncIterable(result)) { for (const value of applyLiveQueryJSONDiffPatch(result)) { console.log(value); } } }); ``` --- _Source: https://npm.io/package/@n1ru4l/graphql-live-query-patch-jsondiffpatch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._