Github action workflow to fetch and commit API data
Samschtig,08 Mai, 2021

In my quest to move a lot of work projects to a serverless architecture I have used Use Svelte + Svelte Spa router svelte spa router in several projects.

This present an issue: if you fetch data from an API it will expose your credentials and this is less than ideal.

Additionally, unless you implement client level caching your API will be hit with a lot of requests and if you have restrictions on usage this can become pretty expensive.

Since most serverless Jamstack platforms (Cloudflare pages, Vercel, Netlify) fetch data from your github repository a good workflow would be to

  • Fetch the API data through a action
  • Commit the saved data in your script (in the case of Svelte + Svelte Spa Router it has to be in the public folder).

I have spent hours to figure out how to use
this fetch api action or more precisely the commit and deploy bit that seems outdate in the readme and did not work for me (perhaps it was designed only for github pages?) but I found something better for the commit part that even checks file changes so won’t trigger useless commits.

So to save hours🤨of testing and searching here is the full workflow:

    name: Fetch API
        on:
      schedule:
        # Runs "at minute 7 past every hour" (see https://crontab.guru)
        - cron: '7 * * * *'
    jobs:
      refresh-feed:
        runs-on: ubuntu-latest
        steps:
          - name: Fetch API Data 📦
            uses: JamesIves/fetch-api-data-action@releases/v1
            with:
              ENDPOINT: https://sampleapi.com?access_key=9samplesample
              # your api URL 
              SAVE_LOCATION: public
              # folder for svelte + svelte spa router 
              BRANCH: master # Pushes the updates to the master branch.
    
         
          - name: Update resources
            uses: test-room-7/action-update-file@v1
            with:
              file-path: public/data.json
              commit-msg: Updated data 
              github-token: ${{ secrets.GITHUB_TOKEN }}

There are 2 actions involved. Fetch API Data and then Update resources will check if the json file was updated and, in the case, will commit to your git repo in the /public folder as data.json

This is it🎉

How to use the data in Svelte

to use the data in Svelte you just need an async load function like this

     async function load() {
     const res = await fetch("data.json");
     data = await res.json();
     return data;
     }

and you are done âś…

the benefits of this solution are:

  • Read from local data.json hence ensure that if the API is down you script still runs;
  • By committing to git the deploy trigger will also start so your app will be automatically deployed on cloudflare pages/vercel/netlify (or your serverless provider linked to github)

This is obviously not applicable if you need real time access to the API (Github actions can only be triggered every 5 minutes) but useful if you don’t need to refresh the API more than once per hour or once a day.

computer back home