@resolve-js/react-hooks

The @resolve-js/react-hooks library exposes React hooks that you can use to connect React components to a reSolve backend. The following hooks are included:

Hook	Description
useClient	Returns the @resolve-js/client library's client object.
useCommand	Initializes a command that can be passed to the backend.
useCommandBuilder	Allows a component to generate commands based on input parameters.
useViewModel	Establishes a WebSocket connection to a reSolve View Model.
useQuery	Allows a component to send queries to a reSolve Read Model or View Model.
useQueryBuilder	Allows a component to generate queries based on input parameters.
useOriginResolver	Resolves a relative path to an absolute URL within the application.
useStaticResolver	Resolves a relative path to a static resource's full URL.

useClient

Returns the @resolve-js/client library's client object.

Example

const client = useClient()

client.command(
  {
    aggregateName: 'Chat',
    type: 'postMessage',
    aggregateId: userName,
    payload: message,
  },
  (err) => {
    if (err) {
      console.warn(`Error while sending command: ${err}`)
    }
  }
)

useCommand

Initializes a command that can be passed to the backend.

Example

const ShoppingList = ({
  match: {
    params: { id: aggregateId }
  }
}) => {
  const renameShoppingList = useCommand({
    type: 'renameShoppingList',
    aggregateId,
    aggregateName: 'ShoppingList',
    payload: { name: shoppingList ? shoppingList.name : '' }
  })

  ...

  const onShoppingListNamePressEnter = event => {
    if (event.charCode === 13) {
      event.preventDefault()
      renameShoppingList()
    }
  }

  ...
}

useCommandBuilder

Allows a component to generate commands based on input parameters.

Example

const ShoppingList = ({
  match: {
    params: { id: aggregateId }
  }
}) => {
  const clearItemText = () => setItemText('')

  const createShoppingItem = useCommandBuilder(
    text => ({
      type: 'createShoppingItem',
      aggregateId,
      aggregateName: 'ShoppingList',
      payload: {
        text,
        id: Date.now().toString()
      }
    }),
    clearItemText
  )

  ...

  const onItemTextPressEnter = event => {
  if (event.charCode === 13) {
    event.preventDefault()
    createShoppingItem(itemText)
  }

  ...
}

useViewModel

Establishes a WebSocket connection to a reSolve View Model.

Example

const ShoppingList = ({
  match: {
    params: { id: aggregateId }
  }
}) => {
  const [shoppingList, setShoppingList] = useState({
    name: '',
    id: null,
    list: []
  })

  const { connect, dispose } = useViewModel(
    'shoppingList',
    [aggregateId],
    setShoppingList
  )

  useEffect(() => {
    connect()
    return () => {
      dispose()
    }
  }, [])

  ...

  const updateShoppingListName = event => {
    setShoppingList({ ...shoppingList, name: event.target.value })
  }

  ...
}

useQuery

Allows a component to send queries to a reSolve Read Model or View Model.

Example

const MyLists = () => {
  const getLists = useQuery(
    { name: 'ShoppingLists', resolver: 'all', args: {} },
    (error, result) => {
      setLists(result)
    }
  )

  useEffect(() => {
    getLists()
  }, [])

  ...
}

useQueryBuilder

Allows a component to generate queries based on input parameters.

Example

const getPage = useQueryBuilder(
  (page) => ({
    name: 'MessageList',
    resolver: 'paginated',
    args: { page },
  }),
  (error, result) => {
    setMessages(result.data)
  }
)

useEffect(() => {
  getPage(page)
}, [])

useOriginResolver

Resolves a relative path to an absolute URL within the application.

Example

var resolver = useOriginResolver()
var commandApiPath = resolver('/api/commands')

useStaticResolver

Resolves a relative path to a static resource's full URL.

var staticResolver = useStaticResolver()
var imagePath = staticResolver('/account/image.jpg')