Quick start

urql is a blazingly fast, lightweight, and customisable GraphQL client. We believe in usability and adaptability, urql is built with extensibility at its core, allowing you to to include just the key logic for a basic app, in addition to being able to grow to support dynamic single-app applications and highly customised infrastructure.

In this page we'll take a look at the quickest route to get up and running with urql.

Installation

# npm
npm i --save urql graphql
# or yarn
yarn add urql graphql

Making the client

import { createClient, Provider } from 'urql';
const client = createClient({ url: 'https://0ufyz.sse.codesandbox.io' });
const App = () => (
<Provider value={client}>
<Todos />
</Provider>
);

Querying data

const Todos = () => {
const [res, executeQuery] = useQuery({
query: `
query { todos { id text } }
`,
});
if (res.fetching) return <p>Loading...</p>;
if (res.error) return <p>Errored!</p>;
return (
<ul>
{res.data.todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
};