@avitus/svelte-request-helper

Install

$ npm install @avitus/svelte-request-helper

Usage

Making SSR requests

To make request from the "module" context simply import the request helper and return its response from your load function. The request helper will make sure to return a format compatible with the response of svelte load function response.

A basic request consists of an object with two keys:

• url – The request URL
• key – The key specifies to which exported variable the response should assigned

Note: The first argument for the request helper is fetch, this is required to have SvelteKit use the correct instance of fetch in SSR, this should ALWAYS be included when using the request helper from the module context.

<script context="module">
    import Request from "@avitus/svelte-request-helper";

    export async function load({ fetch }) {
        return Request(fetch, [
            {
                key: 'foo',
                url: '/api/foo/bar',
            }
        ])
    }
</script>

The response from a request is then put into and exported let with the name of the key. A second variable is also populated automatically if an error occurs during the request. The error variable is simple the name of the key followed by error.

<script>
    export let foo = []
    export let fooError = null
</script>

Multiple requests

The request helper can send multiple SSR requests simply by adding multiple request blocks to the requests array like so:

<script context="module">
    import Request from "@avitus/svelte-request-helper";

    export async function load({ fetch }) {
        return Request(fetch, [
            {
                key: 'foo',
                url: '/api/foo',
            },
            {
                key: 'bar',
                url: '/api/bar',
            },
            {
                key: 'baz',
                url: '/api/baz',
            },
        ])
    }
</script>

<script>
    export let foo = []
    export let fooError = null

    export let bar = []
    export let barError = null

    export let baz = []
    export let bazError = null
</script>

Single requests

When using the request helper for single request the requests array can be switched out for a single request object instead. Also if the request is not intended to be executed server side the fetch argument can simply be omitted.

const response = await Request({
    method: 'post',
    url: '/api/login',
    data: {
        username: username,
        password: password,
    }
})

if (response.ok) {
    console.log('Icecream for everyone!')
}

Options

Request blocks can also include a range of different options listed below:

• method – (String) Specify HTTP method to use for request
• data - (Object) Optional body to include in request
• optional – (Bool) Allow request to fail
• dependency – (String) Use previous request response value in next request

Method

Default = 'GET' Specify HTTP method to use for request

Data

Default = null Specify a request body for the request. This will be converted to a JSON string automatically before the request is sent.

Optional

Default = false Sets whether to allow the specific request block to fail or not. If a request that is not optional fails it will fail the whole pipeline and return an error.

Dependency

Default = null The dependency can be used if a request is dependent of the result of a previous request. What previous request to take the response from and what value from the response to use is specified as a string starting with the key name of the dependency request followed with a path to the value in question. E.g. myKey.foo.id. If the dependency value is not present this request will yield an error. The dependency value is automatically appended to the end of the request URI.

Example

<script context="module">
    import Request from "@avitus/svelte-request-helper";

    export async function load({ fetch }) {
        return Request(fetch, [
            {
                key: 'foo',
                url: '/api/foo',
            },
            {
                key: 'bar',
                url: '/api/bar/', /* The dependency value will be appended to the end of this URI */
                dependency: 'foo.id',
            },
        ])
    }
</script>