Cache in _data api call (EleventyFetch & Netlify)

[msm1227]

I have an api call that I have placed in the _data directory. I am using EleventyFetch for it with a 30m duration set. Currently the script outputs the response to a json file located in "/static/json/getScore.json" and from there I have a njk file that is in my _includes folder that reads from it and turns it into a ag-grid table.

Here is the script making the api call:

const fs = require('fs');
const path = require('path');

const EleventyFetch = require("@11ty/eleventy-fetch");
const url =
"https:/apiurl.com";
const apiKey = "zdffgd4dfdcvfv133z";

// Your code to fetch and process data
const fetchData = async () => {
    const response = await EleventyFetch(url, {
        duration: "30m",
        type: "json",
        fetchOptions: {
            headers: {
                'x-api-key': apiKey
            }
        }
    });

    const playerDataParsed = JSON.parse(JSON.parse(response).data);

    playerDataParsed.forEach(player => {
        if (typeof player.score === 'number') {
            player.score = Number(player.score.toFixed(2));
        }
    });

    return playerDataParsed;
};

// Function to write data to a JSON file
const writeDataToFile = (data) => {
    const filePath = path.join(__dirname, '..', 'static', 'json', 'getScore.json');
    fs.writeFileSync(filePath, JSON.stringify(data, null, 2));
};

// Fetch data, process it, and write to a JSON file
fetchData()
    .then((data) => {
        writeDataToFile(data);
        console.log('Data has been written to getScore.json');
    })
    .catch((error) => {
        console.error('Error fetching or writing data:', error);
    });

And then my njk file:

<div id="playerScore" class="ag-theme-alpine-dark" style="height: 600px;"></div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const gridOptions = {
        columnDefs: [
            { headerName: 'Player Name', field: 'name', sortable: true, filter: true, suppressMenu: true },
            { headerName: 'Position', field: 'pos', sortable: true, filter: 'agTextColumnFilter', suppressMenu: true },
            {
                headerName: 'Score',
                field: 'score',
                sortable: true,
                filter: 'agNumberColumnFilter',
                suppressMenu: true
            },
            { headerName: 'Team', field: 'team', sortable: true, filter: 'agTextColumnFilter', suppressMenu: true },
            { headerName: 'Week', field: 'week', sortable: true, filter: 'agNumberColumnFilter', suppressMenu: true },
            // Add more columns as needed
        ],
        defaultColDef: {
            flex: 1,
            minWidth: 100,
            filter: true,
            sortable: true,
            floatingFilter: true,
        },
        pagination: true, // Enable pagination
        paginationPageSize: 25, // Set the number of rows per page,
    };

    const gridDiv = document.querySelector('#playerScore');
    new agGrid.Grid(gridDiv, gridOptions);

    // Fetch the JSON data
    fetch('/static/json/getScore.json')
        .then((response) => response.json())
        .then((data) => {
            // Set the grid's data source using the fetched JSON data
            gridOptions.api.setRowData(data);
        })
        .catch((error) => {
            console.error('Error fetching data:', error);
        });
});
</script>

Currently that json file is not getting refreshed. The developer that handles the api will update the endpoint and even after waiting 30 mins and then trying to trigger a deploy (with the clear cache option) a new build in Netlify won't update it.

Locally I can run "npm run start" and I see those files get updated. Last night I had to run it locally and get the files to generate and then make a new commit to get it refreshed.

Below is a sample of my package.json:

    "start": "eleventy --config=eleventy.cjs --serve & npx tailwindcss -i src/static/css/tailwind.css -c tailwind.config.js -o _site/static/css/style.css --watch",
    "build": "ELEVENTY_PRODUCTION=true eleventy --config=eleventy.cjs && NODE_ENV=production npx tailwindcss -i src/static/css/tailwind.css -c tailwind.config.js -o _site/static/css/style.css --minify",

netlify.toml:

[build]
  publish = "_site"
  command = "npm run build"
  functions = "functions"

[start]
  publish = "_site"
  command = "npm run start"
  functions = "functions"

[functions]
  node_bundler = "esbuild"

Prior to last night I also had the following in my netlify.toml and I thought maybe somehow that was causing an issue but it doesn't seem to be the case:

[[plugins]]
  package = "netlify-plugin-cache"

[plugins.inputs]
  paths = [ ".cache" ]

I am guessing that I am just not grasping how the cache works between these two and am looking for some guidance on how to best handle this.

Thanks!