deep-jade

Quick question about key equality and using it with gql

This might be obvious based on the docs:

As long as the query key is serializable using JSON.stringify

Does this mean they are checked via the JSON serialised version for equality? So if I did:

  const { data, refetch } = useSuspenseQuery({
    queryKey: [CharactersDocument, { name }] as const,
    queryFn: ({ queryKey: [, { name }] }) => {
      console.log("🔄 Query function called for characters", { name });
      return graffle.gql(CharactersDocument).send({ name });
    },
  });

  const { data, refetch } = useSuspenseQuery({
    queryKey: [CharactersDocument, { name }] as const,
    queryFn: ({ queryKey: [, { name }] }) => {
      console.log("🔄 Query function called for characters", { name });
      return graffle.gql(CharactersDocument).send({ name });
    },
  });

This would be perfectly acceptable and work as expected?

6 Replies

deep-jadeOP•6mo ago

I'm trying to make a generic wrapper like so:

export function useSuspenseQueryGQL<T, A>(
  doc: TadaDocumentNode<T, A>,
  args: A,
  opts: any,
) {
  return useSuspenseQuery({
    queryKey: [doc, args] as const,
    queryFn: ({ queryKey: [doc, args] }) => graffle.gql(doc).send(args),
    ...opts,
  });
}

export function useSuspenseQueryGQL<T, A>(
  doc: TadaDocumentNode<T, A>,
  args: A,
  opts: any,
) {
  return useSuspenseQuery({
    queryKey: [doc, args] as const,
    queryFn: ({ queryKey: [doc, args] }) => graffle.gql(doc).send(args),
    ...opts,
  });
}

but its late and I am tired

rival-black•6mo ago

I believe there used as keys for a Map

rival-black•6mo ago

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#key_equality

MDN Web Docs

Map - JavaScript | MDN

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

rival-black•6mo ago

I think if it was me, I do some work to extract a shorter key (Probably means Id just dive into the Apollo codebase and reverse engineer that

rival-black•6mo ago

Actually uqrl is a better place to look; Apollo is normalised cache so they don't deal with keys the same way query does. Uqrl however does and they have some nice docs on how it works https://nearform.com/open-source/urql/docs/basics/document-caching/#operation-keys

urql Documentation

A highly customisable and versatile GraphQL client.

united-yellow•6mo ago

we hash the key with the queryKeyHashFn, and that uses JSON.stringify on the key itself. So if you have something inside the key that isn't json serializable, you have to provide your own queryKeyHashFn

Gaming

Programming

Quick question about key equality and using it with gql

Did you find this page helpful?