- Stable
3.0.0
Toggle Menu
5.81s
40.14s
JavaScript Data Files
Contents
The following applies to both:
- Global Data Files (
*.js
inside of your_data
directory) - Template and Directory Data Files (
*.11tydata.js
files that are paired with a template file or directory)
Using JS Data Files
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.
export default ["user1", "user2"];
module.exports = ["user1", "user2"];
If you return a function
, we’ll use the return value from that function.
export default function () {
return ["user1", "user2"];
}
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!
async function fetchUserData(username) {
// do some async things
return username;
}
export default async function () {
let user1 = await fetchUserData("user1");
let user2 = await fetchUserData("user2");
return [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];
};
Fetching data from a remote API
You’ll want to use Eleventy’s Fetch plugin to request and cache data from remote APIs. There is another example on Quick Tip #009—Cache Data Requests.
Arguments to Global Data Files
When using a callback function in your JavaScript Data Files, Eleventy will now supply any global data already processed via the Configuration API (eleventyConfig.addGlobalData
) as well as the eleventy
global variable.
export default function (configData) {
if (configData.eleventy.env.source === "cli") {
return "I am on the command line";
}
return "I am running programmatically via a script";
}
module.exports = function (configData) {
if (configData.eleventy.env.source === "cli") {
return "I am on the command line";
}
return "I am running programmatically via a script";
}
Examples
- Example: Using GraphQL
- Example: Exposing Environment Variables
- Fetch GitHub star counts
- Caching remote images, Google Fonts CSS, and more on the Eleventy Fetch plugin docs
Example: Using GraphQL
This “Hello World” GraphQL example works out of the box with Eleventy:
import { graphql, buildSchema } from "graphql";
// this could also be `async function`
export default 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);
};
const { 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);
};
Example: Exposing Environment Variables
You can expose environment variables to your templates by utilizing Node.js’ process.env
property. (Related: Eleventy also supplies a few of its own Environment Variables)
Start by creating a Global Data file (*.js
inside of your _data
directory) and export the environment variables for use in a template:
export default function () {
return {
environment: process.env.MY_ENVIRONMENT || "development",
};
}
module.exports = function () {
return {
environment: process.env.MY_ENVIRONMENT || "development",
};
}
Saving this as myProject.js
in your global data directory (by default, this is _data/
) gives you access to the myProject.environment
variable in your templates.
When MY_ENVIRONMENT
is set, the value from myProject.environment
will be globally available to be used in your templates. If the variable hasn’t been set, the fallback "development"
will be used.
Template Usage
Working from our Inline CSS Quick Tip, we can modify the output to only minify our CSS if we’re building for production:
<style>
{% if myProject.environment == "production" %}
{{ css | cssmin | safe }}
{% else %}
{{ css | safe }}
{% endif %}
</style>
Other pages in Using Data:
- Configure your Templates
- Eleventy Supplied Data
- Data Cascade
- Environment Variables
- JavaScript Data Files
- Custom Data File Formats