David.dev

Github action workflow to fetch and commit API data

• ##github, #svelte, #html, #jamstax
• 8 May 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.

11
👏