urql-test

original_root.tsx

import { useQuery, gql } from 'urql';
import { TodoListItem, TODO_LIST_ITEM_FRAGMENT } from './TodoListItem';

const TODOS_QUERY = gql`
  query {
    todos {
      id
      ...TodoListItemProps
    }
  }

  ${TODO_LIST_ITEM_FRAGMENT}
`;

const Todos = () => {
  const [result] = useQuery({ query: TODOS_QUERY });

  return result.data.todos.map(x => <TodoListItem key={x.id} {...x} />
}

TodoListItem

import { useQuery, gql } from 'urql';
import { TodoListItem, TODO_LIST_ITEM_FRAGMENT } from './TodoListItem';

export const TODO_LIST_ITEM_FRAGMENT = gql`
  fragment TodoListItemProps on Todo {
    text
    completed
  }
`;

export const TodoListItem = () => {
  ...
}