Using fetched/cached data in a web component

[bossanovaorca]

I am building a site with Lit web components and 11ty, and I would like make a request with eleventy-fetch to feed data into my component. I've tried a few approaches to this, but I am unable to import the cached data in my component. The errors all seem to revolve around lack of default imports/exports in eleventy-fetch. Can anyone help me with this issue?

11ty JS data file:

// data.js
const EleventyFetch = require('@11ty/eleventy-fetch');

module.exports = async function () {
  let json = await EleventyFetch(apiEndpointUrl, { type: 'json' });
  return json;
};

// also it seems
// `import EleventyFetch from '@11ty/eleventy-fetch';`
// and
// `export default async function() { ...
// are not valid?

web component file:

// I am unable to access the fetched data in my web component file
import data from '../_data/data.js'; // Error: 'default' is not exported by src/_data/data.js

// trying to perform the fetch within this file does not seem to work either
import EleventyFetch from '@11ty/eleventy-fetch'; // Error: 'EleventyFetch' is not exported by node_modules/@11ty/eleventy-fetch/eleventy-fetch.js

[zachleat]

Hey, are you trying to use this in client-JavaScript in a browser? This is a node-only utility as it stores cached responses to the file system!

If you want to use something like this in the browser, I’d recommend the Fetch API! https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API