urql-array-mutations-hook

    1.0.0 • Public • Published

    urql-array-mutations-hook

    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

    Example

    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 (
        <List
          items={array}
          addItem={addItem}
          removeItem={removeItem}
        />
      )
    }

    Options

    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)

    Install

    npm i urql-array-mutations-hook

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12 kB

    Total Files

    5

    Last publish

    Collaborators

    • raingerber