[Question] How to use jsondiffpatch with apollo-client?

[tetchel]

I don't understand how the example in the readme is meant to be applied to a project which uses apollo-client.

What is networkLayer ? It seems like I should be adding a link which runs after the websocket transport link.

[n1ru4l]

Hey @tetchel, pardon the bad documentation. 😭

I quickly created a PR for showcasing usage with patches using apollo-client: #950

The patch middlewares are built around AsyncIterables, thus you first need to convert the EventSource into an AsyncIterable, then apply the patch transforms and last apply the async iterable to the Observable sink.

Of course, this process would be more straightforward if all the GraphQL clients did not decide to use their own "stream"-like structure and instead use JavaScript native structures (AsyncIterable). Anyways that is just me ranting a bit. 😁

[tetchel]

I see your example uses SSE, how could I turn a websocket (or GraphQLWsLink?) into a Repeater?

[tetchel]

Additionally, on the server side, is this correct?

edit: I think the problem is on the client side, it looks like some of the socket events are not reaching the jsondiffpatch sink. this is with my own attempt at a websocket + repeater implementation but obviously it's missing some key piece.

import { InMemoryLiveQueryStore } from '@n1ru4l/in-memory-live-query-store'
import { applyLiveQueryJSONDiffPatchGenerator } from '@n1ru4l/graphql-live-query-patch-jsondiffpatch'

const liveQueryStore = new InMemoryLiveQueryStore()
const executeQuery = liveQueryStore.makeExecute(execute)

useServer(
  {
    schema,
    execute: (args: ExecutionArgs) =>
      applyLiveQueryJSONDiffPatchGenerator(executeQuery(args)),
    onSubscribe: async (options, msg) => {
   // ... etc
 

[n1ru4l]

I updated the examples to have a full graphql-ws setup with end2end tests #953

[tetchel]

I see this error in the console: Missing field 'customers' while writing result {} (the live query I am running is called customers)

while the error thrown is the standard one from trying to invoke Object.assign on an apollo-client object:
Error: Cannot assign to read only property 'name' of object '#<Object>'
(name is the changed field on the customer)

[n1ru4l]

I will need a minimal working reproduction of this in order to investigate further. However, before you attempt to do so I recommend you to check out the recommended graphql-ws setup I added: #951 (reply in thread)

[n1ru4l]

Please use https://github.com/n1ru4l/graphql-live-query/tree/main/packages/todo-example as a reference on how to properly configure graphql-live-query with your choice of server, client, and transport.

[tetchel]

Thanks, I've got it working using your example!

May I ask, what this comment about the apollo-client version is regarding?

graphql-live-query/packages/todo-example/client-apollo/src/apollo-link/create-ws-apollo-link.ts

Line 1 in 1253659

// for Apollo Client v3 older than v3.5.10:

[n1ru4l]

oh i copied this code from graphql-ws docs :D

But it is still mandatory to implement it yourself because of the middleware applying!

graphql-live-query/packages/todo-example/client-apollo/src/apollo-link/create-ws-apollo-link.ts

Lines 24 to 33 in 1253659

	const source = makeAsyncIterableIteratorFromSink((sink) => {
	return this.client.subscribe<FetchResult>(
	{ ...operation, query: print(operation.query) },
	{
	next: sink.next.bind(sink),
	complete: sink.complete.bind(sink),
	error: sink.error.bind(sink),
	}
	);
	});