@urql/exchange-populate

@urql/exchange-populate

populate is an exchange for auto-populating fields in your mutations.

Read more about the populateExchange on our docs!

Quick Start Guide

First install @urql/exchange-populate alongside urql:

yarn add @urql/exchange-populate
# or
npm install --save @urql/exchange-populate

You'll then need to add the populateExchange, that this package exposes.

import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
import { populateExchange } from '@urql/exchange-populate';

const client = createClient({
  url: 'http://localhost:1234/graphql',
  exchanges: [dedupExchange, populateExchange, cacheExchange, fetchExchange],
});

Example usage

Consider the following queries which have been requested in other parts of your application:

# Query 1
{
  todos {
    id
    name
  }
}

# Query 2
{
  todos {
    id
    createdAt
  }
}

Without the populateExchange you may write a mutation like the following which returns a newly created todo item:

# Without populate
mutation addTodo(id: ID!) {
  addTodo(id: $id) {
    id        # To update Query 1 & 2
    name      # To update Query 1
    createdAt # To update Query 2
  }
}

By using populateExchange, you no longer need to manually specify the selection set required to update your other queries. Instead you can just add the @populate directive.

# With populate
mutation addTodo(id: ID!) {
  addTodo(id: $id) @populate
}

Note: The above two mutations produce an identical GraphQL request.