1.0.0 • Public • Published


    Mutate arrays in response to urql operations

    React hook for combining the results from useQuery and useMutation. Meant for this scenario:

    • You fetch an array of objects from a graphql server
    • You send requests to modify that array on the server
    • You want to sync the local array without re-requesting the whole darn thing


    import { useArrayMutations } from 'urql-array-mutations-hook'
    import List from './ListComponent'
    function ListWithGraphql ({ options }) {
      const [array, add, remove] = useArrayMutations(options)
      // These functions mutate the array,
      // which triggers a render cycle
      const addItem = add[1]
      const removeItem = remove[1]
      return (


    The input for useArrayMutations is an object with these properties:

    • key

      • String | Function

      • Each array element must be an object with a unique key value. By default, it uses the id property from each object, but the key option makes this customizable. When using a function, it takes one item as input, and must return the key value for that item.

    • get

      • String | Object

      • Input for useQuery; a string can be used as shorthand for the query property

    • add

      • String

      • Input for useMutation; the operation result must include a key for the added item

    • remove

      • String

      • Input for useMutation; the operation result must include a key for the removed item

    • sort

      • Function

      • Invoked whenever the array is modified. It takes a single parameter (the array), and must return a sorted version.

    Check here for examples of get, add, and remove.

    Return Value

    The return value is an array of arrays:

    const [array, add, remove, query] = useArrayMutations(options)
    • [0] - the current array, made by combining any graphql responses

    • [1] - return value from useMutation(...options.add)

    • [2] - return value from useMutation(...options.remove)

    • [3] - return value from useQuery(...options.query)


    npm i urql-array-mutations-hook

    DownloadsWeekly Downloads






    Unpacked Size

    12 kB

    Total Files


    Last publish


    • raingerber