@urql/core

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);
});