Interact

Containers need to be configured so that they know where and how to send network requests. The second argument to Interact.createContainer() is an object where each key-value pair corresponds to an API resource.

Example:

Interact.createContainer(WrappedComponent, {
  resourceName: {
    base: '/api/v1/resourceName', // base uri prepended to all operation uris
    list: {method: 'GET', uri: ''}, // method and uri for listing items
    create: {method: 'POST', uri: ''}, // method and uri for creating an item
    read: {method: 'GET', uri: '/1'}, // method and uri for reading an item
    update: {method: 'PUT', uri: '/1'}, // method and uri for updating an item
    patch: {method: 'PATCH', uri: '/1'}, // method and uri for patching an item
    remove: {method: 'DELETE', uri: '/1'}, // method and uri for removing an item
    headers: {
      Accept: 'application/json',
    },
    defaultOperation: 'list', // operation that is executed when component mounts
    uid: 'id', // unique identifier key for each item
  },
  ...
})

Defaults / URI shorthand

Instead of using an object for each operation config (eg. read, list, update) we can choose to only write the URI string. The operations will use the default HTTP verbs for each. The above could have been written like this:

Interact.createContainer(WrappedComponent, {
  resourceName: {
    base: '/api/v1/resourceName',
    list: '',
    create: '',
    read: '/1',
    update: '/1',
    patch: '/1',
    remove: '/1',
  },
  ...
})

Dynamic URIs

Each operation URI on a resource gets evaluated as a template string. The template string gets passed the props of the container and the id for the item when performing a mutation (see the Mutations Guide for more info).

For example:

Interact.createContainer(WrappedComponent, {
  resourceName: {
    base: '/api/v1/${props.resourceName}',
    list: '',
    create: '',
    read: '/${id}',
    update: '/${id}',
    patch: '/${id}',
    remove: '/${id}',
  },
  ...
}))

Warning

Notice that the uri template strings for each operation do not use back-ticks like ES6 template strings, but instead use ordinary single or double quotation marks.

This is so that the template strings can be evaluated when the user wants to send a request, not when the container is created.

Item keys/URIs

In the above example you'll notice that all operations for individual items (eg. update, remove, read, patch) have the same URI. In this case we can simplify our configuration even further by using an item key to configure all of the item operations at the same time.

For example:

Interact.createContainer(WrappedComponent, {
  resourceName: {
    base: '/api/v1/${props.resourceName}',
    item: '/${id}',
  },
  ...
})

Info

The create and list operations use the base URI by default and can be omitted.

Resource URIs

The previous example can be simplified even further. We can define a resource by only using the base URI string. If we used the following configuration:

Interact.createContainer(WrappedComponent, {
  resourceName: '/api/v1/${props.resourceName}',
  ...
})

It would be equivalent to writing the following:

Interact.createContainer(WrappedComponent, {
  resourceName: {
    base: '/api/v1/${props.resourceName}',
    list: {method: 'GET', uri: ''},
    read: {method: 'GET', uri: '/${id}'},
    create: {method: 'POST', uri: ''},
    update: {method: 'PUT', uri: '/${id}'},
    patch: {method: 'PATCH', uri: '/${id}'},
    remove: {method: 'DELETE', uri: '/${id}'},
    headers: {},
    defaultOperation: 'list',
    uid: 'id',
  },
  ...
})

Request Headers

Headers can be configured per resource. For each request sent it will attach the headers defined in the headers property of the resource.

Interact.createContainer(WrappedComponent, {
  resourceName: {
    base: '/api/v1/resourceName',
    item: '/${id}'
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: 'my_token',
    },
  },
  ...
})

Next: Mutations