Nimble Porridge Muncher

    x-resources

    1.4.3 • Public • Published

    x-resources

    The plugin for axios provides services for making web requests via resources and handle responses.

    Browser Support

    Chrome Firefox Safari Opera Edge IE
    Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔

    Installation

    You can install it via yarn or NPM.

    $ yarn add x-resources
    $ npm install x-resources
    

    x-resources goal

    In short, we want clean your code from a mess like this:

    axios
        .get(`/userURL/${between}/?filter=${filter}`)
        .then(response => {
            this.someData = response.body
        })
        .catch(responseError => {
            // handle error
        })

    To something way more readable and easy to maintain like this:

    userResource
        .fetch({ between, filter })
        .then(response => {
            this.someData = response.body
        })
        .catch(responseError => {
            // handle error
        })

    What do you gain by using x-resources?

    • easy to maintain resources;
    • creating resources through actions;
    • more code expressivity;
    • write less code;
    • let your resource take care of HTTP methods;
    • let your resource take care of url data injections and query params;
    • Your development team won't have any headaches anymore replacing URLs in the system because the backend dude/chick decided to change it;
    • Your development team won't have the issue with sending the wrong URL to production;
    • Your development team won't have to type axios[http_methos_goes_here] every single time you want to call an API;
    • Your development team now you have resources! All you care about any HTTP request you made is in a file (read "How can I use it?"), meaning is so easy to maintain you might forget how your life was before using x-resources;

    OK! How can I use it?

    Let us show you everything x-resources can do.

    Start by creating a resources file. For our example, we created a folder called resources and created a user.js file in it. In the resources/user.js we create our resource like:

    import { resources } from 'x-resources'
     
    const baseURL = 'https://api.github.com'
     
    const actions = {
        find: { method: 'GET', url: '/users' },
        findOne: { method: 'GET', url: '/users/:id' },
        filter: { method: 'GET', url: '/users/filterBy=:filters' },
        create: { method: 'POST', url: '/users' },
        append: { method: 'POST', url: '/users/:id' },
        update: { method: 'PUT', url: '/users/:id' },
        remove: { method: 'DELETE', url: '/users/:id' }
    }
     
    export default resources(baseURL, actions)

    OK! How can you use the resources/user.js we've just created? Simple:

    import userResources from 'resources/user'
     
    // HTTP method: GET
    // url: https://api.github.com/users
    userResources.find()
     
    // HTTP method: GET
    // url: https://api.github.com/users/1
    userResources.findOne({ id: 1 })
     
    // HTTP method: GET
    // url: https://api.github.com/users/filterBy=name
    userResources.filter({ filter: 'name' })
     
    // HTTP method: POST
    // url: https://api.github.com/users
    // payload: { name: 'john', age: 20 }
    userResources.create({
      name: 'john',
      age: 20
    })
     
    // HTTP method: POST
    // url: https://api.github.com/users/1
    // payload: { name: 'john', age: 20 }
    userResources.append(
      {
        id: 1
        name: 'john',
        age: 20
      })
     
    // HTTP method: PUT
    // url: https://api.github.com/users/filterBy=name
    userResources.update(
      {
        id: 1
        name: 'john',
        age: 25
      })
     
    // HTTP method: DELETE
    // url: https://api.github.com/users/1
    userResources.remove({ id: 1 })
     
     
    // HTTP method: DELETE
    // HTTP header: Content-Type:application/pdf
    // url: https://api.github.com/users/1
    userResources.remove(
      { id: 1 },
      { headers: { 'Content-Type': 'application/pdf' }} // you can send extra params too
    )

    You're done! Any of those resources will always return a Promise from the Promise API.

    Recomendations

    • We strongly recommend that you use x-resources on current or future projects :D;
    • We recommend that you always have a baseURL in your resource file (like the one we created resources/user.js), because you could change this URL based on your production, homolog, test or development environment. Doing so you could easily have a function returning a baseURL for you with the exact URL you need to run your resources;

    Milestones

    • create a baseURL to handle any url based on your develop/test/homolog/production environments;
    • make x-resources agnostic from any HTTP client but supporting any axios client user;

    Install

    npm i x-resources

    DownloadsWeekly Downloads

    14

    Version

    1.4.3

    License

    ISC

    Unpacked Size

    24.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • pablohpsilva