npm

Need private packages and team management tools?Check out npm Orgs. »

@beyonk/sapper-httpclient

3.4.1 • Public • Published

Beyonk

Sapper HttpClient

js-standard-style CircleCI

Sapper isomorphic fetch library

Why

In sapper, there are three different ways of fetching data:

  • client
  • server
  • isomorphic (client + server)

This library helps you abstract over where you are fetching data, meaning that your code maintains consistency without having to worry about where your data is being fetched.

The way it does this is by trying to use the first available fetch method, and failing over to alternatives if a method is not available. The methods it tries are, in the following order:

  1. Any fetch library you pass to create() (for example, preload's this.fetch)
  2. window.fetch if the library detects it is running clientside
  3. node-fetch, or whatever you want to pass in, if nothing else is available (pure server-side)

Generally this means that your usage is the same no matter where you call it, with one exception - using this library in the preload method requires you to pass in Sapper's special this.fetch method, as it is not available outside of the preload method. Examples of which are below.

Usage

To use within a Sapper application:

Install it

npm i -D @beyonk/sapper-httpclient

Configure it (both server-side and client-side as there are two bundles)

// src/client.js && src/server.js
import { configure } from '@beyonk/sapper-httpclient'
 
configure({ baseUrl: 'https://example.com/your/api/base' })

Use it on the client:

// src/routes/some-route.html
import { create } from '@beyonk/sapper-httpclient'
 
// in a method (client-side)
const api = create()
const { json } = await api.endpoint('some/endpoint').get()
console.log(json)
 
// in preload (Svelte v2) (isomorphic)
const api = create()
const { json } = await api
  .transport(this.fetch) // Use sapper's built in "fetch" method
  .endpoint('some/endpoint')
  .get()
console.log(json)
 
// in preload (Svelte v3) (isomorphic)
import { fetch } from '@sapper/app'
 
const api = create()
const { json } = await api
  .transport(fetch) // Use sapper's built in "fetch" method
  .endpoint('some/endpoint')
  .get()
console.log(json)

Use it on the server:

// src/routes/some-route.js
import fetch from 'node-fetch' // or Sapper's built in fetch
import { create } from '@beyonk/sapper-httpclient'
 
const api = create()
const { json } = await api
  .transport(fetch) // pass node fetch in here.
  .endpoint('some/endpoint')
  .get()
console.log(json)

Methods

const api = create()
const client = api
  .endpoint('some/endpoint')
 
console.log(await client.get()) // Get endpoint
console.log(await client.payload({ foo: 'bar' }).put()) // Put with body
console.log(await client.payload({ foo: 'bar' }).post()) // Post with body
console.log(await client.query({ foo: 'bar' }).get()) // Get with query
console.log(await client.del()) // Delete

Using built in response handling

const api = create()
const profile = await api
  .endpoint('some/endpoint')
  .get(json => {
    return json.profile
  })
console.log(profile)

Catching errors

  await client
    .endpoint('some/url')
    .forbidden(e => {
      console.error('Forbidden', e)
    })
    .notFound(e => {
      console.error('Not found', e)
    })
    .accessDenied(e => {
      console.error('Access denied', e)
    })
    .conflict(e => {
      console.error('Conflict', e)
    })
    .preconditionFailed(e => {
      console.error('Precondition failed', e)
    })
    .badData(e => {
      console.error('Bad data', e)
    })
    .default(e => {
      // Any other error caught here
      console.error('Some error', e)
    })
    .get()

Running Tests

npm test

Credits

install

npm i @beyonk/sapper-httpclient

Downloadsweekly downloads

60

version

3.4.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability