useFragment?

[taneba]

I know there were some discussions about "fragment api", but I just want to summarize and understand the possibilities and difficulties.

If my understanding is right, there's 2 possible ways to accomplish "Fragment masking" (I'm assuming it is the root goal of the fragment api) with urql.

Example

let's say we have a query and a fragment like below.

Fragment (intended to be used in the TodoItem component):

const TodoItem_Todo = gql(/* GraphQL */ `
  fragment TodoItem_Todo on Todo {
    id
    title
  }
`)

And a root query (used in the page root):

const GetTodos = gql(/* GraphQL */ `
  query GetTodos {
    todosByCurrentUser {
      ...TodoItem_Todo
      id
      completed
    }
  }
`)

this is a technique called "fragment collocation", which is popular pattern in GraphQL world.

Possible ways

1. filtering when passing data as a prop.

This might be the oldest approach, usually we would use filter api from grapyql-anywhere.

import { filter } from 'graphql-anywhere'
// ...
   <TodoItem todo={filter(TodoItem_Todo, todo)} />

This works, but it's not ideal (a bit verbose, easily fall in to prop drilling hell) and graphql-anywhere is not actively maintained.

2. filtering when accessing in the child component

This can be done by using useFragment via @graphql-codegen/client-preset.

import { useFragment } from '~/gql'

function TodoItem(props) {
  const too = useFragment(TodoItem_Todo, props.todo)
}

This looks better, but it's not ideal from re-rendering performance perspective.

apollo-client

And you can do something different in apollo-client.

apollo-client is experimenting useFragment_experimental, which retrieves fragment data from cache.
https://www.apollographql.com/docs/react/api/react/hooks-experimental#usefragment_experimental

Question: Can same thing be implemented in urql?
It looks nice because it can reduce unnecessary code and it won't affect performance.

If there's any other approach or if I'm missing something, please tell me :)
I think performant and easy-to-write/read fragment masking api is something we missing in urql (even in graphql community?), so it would be great to have one.