https://github.com/kevmodrome/svelte-preprocessor-fetch

A preprocessor for Svelte can be used to fetch data before the component is compiled.
https://github.com/kevmodrome/svelte-preprocessor-fetch

Last synced: about 2 months ago
JSON representation

A preprocessor for Svelte can be used to fetch data before the component is compiled.

• Host: GitHub
• URL: https://github.com/kevmodrome/svelte-preprocessor-fetch
• Owner: kevmodrome
• Created: 2020-03-10T13:00:46.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-27T05:47:52.000Z (3 months ago)
• Last Synced: 2024-10-03T02:14:54.469Z (3 months ago)
• Language: JavaScript
• Size: 839 KB
• Stars: 51
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-preprocessor-fetch

> A preprocessor for Svelte that can be used to fetch data before components are compiled.

## Demos

![ScreenShot](screenshot.gif)

## Installation

```bash

yarn add -D svelte-preprocessor-fetch

```

## Usage

### With `rollup-plugin-svelte`

```js

// rollup.config.js

import svelte from 'rollup-plugin-svelte';

import preprocessFetch from 'svelte-preprocessor-fetch'

export default {

  ...,

  plugins: [

    svelte({

      preprocess: preprocessFetch()

    })

  ]

}

```

### In components

Create a function called `getStaticProps()` in your script tag and do your fetches here. The content of this function must be fully self-container. You can not use any variables from outside or import any packages. It has support for fetch via `node-fetch`.

The data is available using as `data` in your component.

```html

  async function getStaticProps() {

    const query = `{

			continents {

				name

			}

		}`;

    const res = await fetch("https://countries.trevorblades.com/", {

      method: "POST",

      headers: { "Content-Type": "application/json" },

      body: JSON.stringify({ query })

    });

    const { data } = await res.json();

    return data;

  }

  
Continents:

  


    {#each data.continents as { name }}

    


      
{name}

    

    {/each}

  


```

## Caveats

This preprocessor is probably extremely brittle, PRs are welcome to improve it further.