detail.js

import { Cache, Connect, query, fragment } from 'urql'
import { todo, todoFragment } from './gql.js'

const Detail = ({ id }) => (
  <Connect query={query(todos)}>
    {({ loading, data: fetchedData }) => (
      <Cache query={fragment(todoFragment, { id })}>
       {({ data: cachedData }) => {
         const data = loading ? cachedData : fetchedData;
         return (/* ... */)
       }}
      </Cache>
    )}
  </Connect>
)

export default Detail

gql.js

export const todoFragment = `
  fragment TodoFragment {
    id
    text
    isDone
    createdAt
  }
`

export const todos = `
  query Todos {
    todos {
      ...TodoFragment
    }
  }

  ${todoFragment}
`

export const todo = `
  query Todo($id: ID!) {
    todo(id: $id) {
      ...TodoFragment
    }
  }

  ${todoFragment}
`

list.js

import { Connect, query } from 'urql'
import { todos } from './gql.js'

const List = () => (
  <Connect query={query(todos)}>
    {/* ... */}
  </Connect>
)

export default List