Skip to content

Instantly share code, notes, and snippets.

@Martin-Andersen
Forked from joshnuss/httpStore.js
Created June 5, 2022 14:00
Show Gist options
  • Save Martin-Andersen/09a023a675f0f8ca391a471305e1302e to your computer and use it in GitHub Desktop.
Save Martin-Andersen/09a023a675f0f8ca391a471305e1302e to your computer and use it in GitHub Desktop.
A Svelte store backed by HTTP
import { writable } from 'svelte/store'
// returns a store with HTTP access functions for get, post, patch, delete
// anytime an HTTP request is made, the store is updated and all subscribers are notified.
export default function(initial) {
// create the underlying store
const store = writable(initial)
// define a request function that will do `fetch` and update store when request finishes
store.request = async (method, url, params=null) => {
// before we fetch, clear out previous errors and set `loading` to `true`
store.update(data => {
delete data.errors
data.loading = true
return data
})
// define headers and body
const headers = {
"Content-type": "application/json"
}
const body = params ? JSON.stringify(params) : undefined
// execute fetch
const response = await fetch(url, { method, body, headers })
// pull out json body
const json = await response.json()
// if response is 2xx
if (response.ok) {
// update the store, which will cause subscribers to be notified
store.set(json)
} else {
// response failed, set `errors` and clear `loading` flag
store.update(data => {
data.loading = false
data.errors = json.errors
return data
})
}
}
// convenience wrappers for get, post, patch, and delete
store.get = (url) => store.request('GET', url)
store.post = (url, params) => store.request('POST', url, params)
store.patch = (url, params) => store.request('PATCH', url, params)
store.delete = (url, params) => store.request('DELETE', url, params)
// return the customized store
return store
}
import http from './httpStore.js'
// create store and set initial value
const cart = http(window.cart)
// any component can subscribe to changes
cart.subscribe($cart => console.log('Cart was updated: ', $cart))
// issue HTTP POST to add item to cart
cart.post('/cart', {productId: 123, quantity: 4})
// prints: Cart was updated: ...
// issue HTTP DELETE item '123' from cart
cart.delete('/cart/123')
// prints: Cart was updated: ...
// issue HTTP GET to refresh cart
cart.get('/cart')
// prints: Cart was updated: ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment