urql

What is urql?

urql is a highly customizable and versatile GraphQL client for React and other frameworks. It provides a set of tools to handle GraphQL queries, mutations, and subscriptions with ease, offering a flexible and extensible API.

What are urql's main functionalities?

GraphQL Queries

This feature allows you to perform GraphQL queries to fetch data from a GraphQL server. The `useQuery` hook is used to execute the query and manage the loading, error, and data states.

const { useQuery } = require('urql');

const query = `
  query {
    todos {
      id
      text
      completed
    }
  }
`;

function Todos() {
  const [result] = useQuery({ query });
  const { data, fetching, error } = result;

  if (fetching) return <p>Loading...</p>;
  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <ul>
      {data.todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

GraphQL Mutations

This feature allows you to perform GraphQL mutations to modify data on the server. The `useMutation` hook is used to execute the mutation and handle the result.

const { useMutation } = require('urql');

const mutation = `
  mutation($text: String!) {
    addTodo(text: $text) {
      id
      text
      completed
    }
  }
`;

function AddTodo() {
  const [result, executeMutation] = useMutation(mutation);

  const addTodo = async (text) => {
    await executeMutation({ text });
  };

  return (
    <button onClick={() => addTodo('New Todo')}>Add Todo</button>
  );
}

GraphQL Subscriptions

This feature allows you to subscribe to real-time updates from a GraphQL server. The `useSubscription` hook is used to handle the subscription and manage the incoming data.

const { useSubscription } = require('urql');

const subscription = `
  subscription {
    newTodo {
      id
      text
      completed
    }
  }
`;

function NewTodos() {
  const [result] = useSubscription({ query: subscription });
  const { data, error } = result;

  if (error) return <p>Oh no... {error.message}</p>;

  return (
    <ul>
      {data && data.newTodo && (
        <li key={data.newTodo.id}>{data.newTodo.text}</li>
      )}
    </ul>
  );
}

Other packages similar to urql

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It offers a robust set of features including caching, error handling, and more. Compared to urql, Apollo Client is more feature-rich and has a larger community, but it can be more complex to set up and use.

relay-runtime

Relay is a JavaScript framework for building data-driven React applications powered by GraphQL. It emphasizes performance and scalability, making it suitable for large applications. Relay is more opinionated and requires a specific setup, which can be more challenging for beginners compared to urql.

graphql-request

graphql-request is a minimal GraphQL client for Node and browsers. It is lightweight and easy to use, making it a good choice for simple applications or scripts. Unlike urql, it does not provide React hooks or built-in state management, so it requires more manual handling of data fetching and state.

README

urql

A highly customizable and versatile GraphQL client for React

More documentation is available at formidable.com/open-source/urql.