App.tsx

import React from 'react';
import { useClient, gql } from 'urql';

const TodoQuery = gql`
  query($id: ID!) {
    todo(id: $id) {
      id
      text
    }
  }
`;

function NameLoader(props) {
  const [showTodo, setShowTodo] = useState(false)
  const client = useClient();

  return (<>
    <Button
      onClick={() => {
        client.query(TodoQuery, {id: '4'})
        setShowTodo(true)
      }}
    >
      Visit todo
    </Button>
    <Suspense fallback="Loading...">
      {showTodo
        ? <Todo id="4" />
        : null
      }
    </Suspense>
  </>);
}

function Todo({ id }) {
  const result = useQuery({ query: TodoQuery, variables: { id } })

  return <p>{result.data.todo?.text}</p>;
}