JavaScript Data Files #

New in v0.5.3

This file applies to both Global Data Files (*.js inside of your _data directory) and Template and Directory Data Files (*.11tydata.js files that are paired with a template file).

You can export data from a JavaScript file to add data, too. This allows you to execute arbitrary code to fetch data at build time.

module.exports = [
  "user1",
  "user2"
];

If you return a function, we’ll use the return value from that function.

module.exports = function() {
  return [
    "user1",
    "user2"
  ];
};

We use await on the return value, so you can return a promise and/or use an async function too. Fetch your data asynchronously at build time!

module.exports = function() {
  return new Promise((resolve, reject) => {
    resolve([
      "user1",
      "user2"
    ]);
  });
};

async function fetchUserData(username) {
  // do some async things
  return username;
}
 
module.exports = async function() {
  let user1 = await fetchUserData("user1");
  let user2 = await fetchUserData("user2");
  return [user1, user2];
};

Example: Using GraphQL #

This "Hello World" GraphQL example works out of the box with Eleventy:

var { graphql, buildSchema } = require("graphql");
  
// this could also be `async function`
module.exports = function() {
  // if you want to `await` for other things here, use `async function`
  var schema = buildSchema(`type Query {
    hello: String
  }`);
  
  var root = {
    hello: () => "Hello world async!"
  };
  
  return graphql(schema, "{ hello }", root);
};