Request & Response

Notes: Frontend Data Fetching (Axios)

We use Axios as our data fetching library on the frontend, so the backend responses will ultimately come to the front end as the value of the data field of Axios's response object, which has the following format:

{
  // `data` is the response that was provided by the server
  data: {}, // or [{}] for "many return" requests (e.g. Rails #index action)

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  // As of HTTP/2 status text is blank or unsupported.
  // (HTTP/2 RFC: https://www.rfc-editor.org/rfc/rfc7540#section-8.1.2.4)
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lower cased and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

• Use JSON as the primary data interchange format.

• Structure responses as:

  • CRUD

    • C

      • SINGLE

        • {..} (single object return from backend)

      • MANY

        • [...] (many objects return from backend)

    • R

      • SINGLE

        • {..} (single object return from backend)

      • MANY

        • [...] (many objects return from backend)

    • U

      • SINGLE

        • {..} (single object return from backend)

      • MANY

        • [...] (many objects return from backend)

    • D

      • Note: consider just id / id[]

      • SINGLE

        • {..} (single object return from backend)

      • MANY

        • [...] (many objects return from backend)

  • Other

    • ...?

      • Successful

        • { message: "..." }

      • Error

        • { error: "..." }