or

yarn add @urql/preact urql graphql
# or
npm install --save @urql/preact urql graphql

import { createClient, cacheExchange, fetchExchange, Provider, useQuery } from '@urql/preact';

const client = createClient({
  url: 'https://myHost/graphql',
  exchanges: [cacheExchange, fetchExchange],
});

const App = () => (
  <Provider value={client}>
    <Dogs />
  </Provider>
);

const Dogs = () => {
  const [result] = useQuery({
    query: `{ dogs { id name } }`,
  });

  if (result.fetching) return <p>Loading...</p>;
  if (result.error) return <p>Oh no...</p>;

  return result.data.dogs.map(dog => <p>{dog.name} is a good boy!</p>);
};