@urql/core

What is @urql/core?

The @urql/core package is a highly customizable and versatile GraphQL client for JavaScript applications. It provides a set of tools to perform GraphQL queries, mutations, and subscriptions, making it easier to interact with GraphQL APIs. It's designed to be lightweight and flexible, allowing developers to tailor their GraphQL client to their specific needs.

What are @urql/core's main functionalities?

Executing a Query

This feature allows you to execute a GraphQL query using the @urql/core package. The example demonstrates how to create a client, define a GraphQL query, and execute the query to fetch data.

import { createClient, gql, query } from '@urql/core';

const client = createClient({ url: 'https://my-graphql-api.com/graphql' });

const QUERY = gql`
  query GetBooks {
    books {
      id
      title
      author
    }
  }
`;

query(client, { query: QUERY }).toPromise().then(result => {
  console.log(result.data);
});

Performing a Mutation

This feature demonstrates how to perform a GraphQL mutation to modify data on the server. The code sample shows how to create a client, define a mutation with variables, and execute the mutation.

import { createClient, gql, mutation } from '@urql/core';

const client = createClient({ url: 'https://my-graphql-api.com/graphql' });

const MUTATION = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
    }
  }
`;

const variables = { title: 'New Book', author: 'Unknown Author' };

mutation(client, { query: MUTATION, variables }).toPromise().then(result => {
  console.log(result.data);
});

Subscribing to Data

This feature enables real-time data updates through GraphQL subscriptions. The example shows how to create a client, define a subscription, and listen for real-time data updates.

import { createClient, gql, subscription } from '@urql/core';

const client = createClient({ url: 'https://my-graphql-api.com/graphql', fetchOptions: () => ({ headers: {} }), });

const SUBSCRIPTION = gql`
  subscription BookAdded {
    bookAdded {
      id
      title
    }
  }
`;

const { unsubscribe } = subscription(client, { query: SUBSCRIPTION }).subscribe(result => {
  console.log(result.data);
});

Other packages similar to @urql/core

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Compared to @urql/core, Apollo Client offers a more extensive set of features out of the box, including integrated caching and a larger ecosystem of tools and extensions. However, it might be heavier than @urql/core for projects that require a more lightweight and flexible solution.

graphql-request

graphql-request is a minimal GraphQL client for executing queries and mutations. It's simpler and more straightforward than @urql/core, focusing solely on sending requests and receiving responses without the more advanced features like caching or subscriptions. This makes it a good choice for projects that need a lightweight way to interact with a GraphQL API without the additional complexity.

relay-runtime

Relay is a powerful framework for building data-driven React applications with GraphQL. It provides strong conventions and optimizations out of the box, such as automatic data normalization and caching. Compared to @urql/core, Relay offers more advanced features tailored to complex React applications, but it comes with a steeper learning curve and more boilerplate code.

README

@urql/core

The shared core for the highly customizable and versatile GraphQL client, urql

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