Simply copy the Fetch
folder into site/addons/
. That's it!
Name | Type | Default | Description |
---|---|---|---|
deep |
Boolean | true |
Fetch nested data recursively, works for arrays as well as related content. |
nested |
Boolean | false |
Add child pages to the page instead of the root of the response. |
depth |
Integer | null |
Depth of nested page to fetch. Only works nested . null means unlimited. |
filter |
String | null |
Filter published and unpublished data. |
taxonomy |
String | null |
Filter data by a single or multiple taxonomies. |
locale |
String | null |
Fetch data for a specific locale. |
limit |
Integer | 0 |
Limit the total results returned. |
offset |
Integer | 0 |
The number of items the results should by offset by. |
query |
String | null |
The query to search for. |
index |
String | null |
The search index to use during Search (requires a Collection Index). |
debug |
Boolean | false |
Dump all data on the page (useful to check what data is available). |
api_key |
String | null |
When Enable API Key is activated in the settings, make sure to add the api_key to every request.* |
*Both GET
and POST
requests are supported; include the api_key
in the url query string or in the body of the request. It is recommended to use POST
requests over HTTPS to ensure your api_key
remains secure.
The settings page is accessed via CP > Configure > Addons > Fetch
.
Name | Type | Description |
---|---|---|
Deep | Boolean | Site default to 'go deep' when fetching data. |
Nested | Boolean | Site default to 'nested' parameter when fetching data. |
Enable API Key | Boolean | Whether to use the API Key for authentication. |
API Key | String | Generate an API Key. Only used when Enable API Key is set to true . |
IP Whitelist | Array | List of whitelisted IP addresses. Leave blank to allow any. |
Domain Whitelist | Array | List of whitelisted Domains. Leave blank to allow any. |
Please note that these Authentication settings are potentially not completely secure, it’s meant as a simple layer to stop ‘general’ access to the API endpoints. If you have any ideas on improvements, please open a PR!
By default, Fetch will 'go deep' and find all nested data recursively within the dataset. This means that any related content (saved as an ID) will also be fetched and returned.
This behavior can be disabled via Fetch's settings (CP > Configure > Addons > Fetch). You can also enable/disable deep fetching per request via a query string/tag option (see below for further details). When disabled, only a shallow fetch will be performed; related data will simply be returned as its ID.
- Collection: The Collection's slug.
- Entry: An Entry's ID or collection + slug.
- Page: A single Page's URI.
- Pages: All Pages or a comma-separated list of Page URIs.
- Global: A single Global slug.
- Globals: All Globals or a comma-separated list of Global slugs.
- Search: A Search query.
Name | Example |
---|---|
deep |
URL: http://domain.com/!/Fetch/collection/blog?deep=true Tag: {{ fetch:blog deep="true" }} |
nested |
URL: http://domain.com/!/Fetch/collection/blog?nested=true Tag: {{ fetch:blog nested="true" }} |
filter |
URL: http://domain.com/!/Fetch/collection/blog?filter=published Tag: {{ fetch:blog filter="published" }} |
taxonomy |
URL: http://domain.com/!/Fetch/collection/blog?taxonomy=tags/news Tag: {{ fetch:blog taxonomy="tags/news" }} |
locale |
URL: http://domain.com/!/Fetch/collection/blog?locale=nl Tag: {{ fetch:blog locale="nl" }} |
limit |
URL: http://domain.com/!/Fetch/collection/blog?limit=5 Tag: {{ fetch:blog limit="5" }} |
offset |
URL: http://domain.com/!/Fetch/collection/blog?offset=3 Tag: {{ fetch:blog offset="3" }} |
query |
URL: http://domain.com/!/Fetch/collection/search?query=foo Tag: {{ fetch:blog query="foo" }} |
index |
URL: http://domain.com/!/Fetch/collection/blog?query=foo&index=collections/news Tag: {{ fetch:blog query="foo" index="collections/news" }} |
debug |
URL: http://domain.com/!/Fetch/collection/blog?debug=true Tag: {{ fetch:blog debug="true" }} |
api_key |
URL: http://domain.com/!/Fetch/collection/blog?api_key=[YOUR_KEY_HERE] Tag: N/A |
JS
axios.get('/!/Fetch/collection/blog').then(...);
Tag
Fetch all blog entries
{{ fetch collection="blog" }}
Shorthand
{{ fetch:blog }}
Example passing data into a Vue component
<my-component :data='{{ fetch:blog }}'></my-component>
Entries can either be fetched by their ID or by their collection + slug.
JS
axios.get('/!/Fetch/entry/a1880157-2b7e-4d7c-ac8f-01790d821312').then(...);
axios.get('/!/Fetch/entry/blog/my-awesome-blog-post').then(...);
Tag
Fetch a single entry
{{ fetch entry="a1880157-2b7e-4d7c-ac8f-01790d821312" }}
{{ fetch entry="blog/my-awesome-blog-post" }}
Example passing data into a Vue component
<my-component :data='{{ fetch entry="a1880157-2b7e-4d7c-ac8f-01790d821312" }}'></my-component>
<my-component :data='{{ fetch entry="blog/my-awesome-blog-post" }}'></my-component>
JS
Fetch a single page
axios.get('/!/Fetch/page/about').then(...);
Fetch all pages
axios.get('/!/Fetch/pages').then(...);
Fetch multiple pages
var pages = '/, /about, /contact-us';
axios.get('/!/Fetch/pages/?pages='+encodeURIComponent(pages)).then(...);
Fetch pages nested
axios.get('/!/Fetch/pages/?nested=true&depth=5').then(...);
Tag
Fetch a single page
{{ fetch page="/about" }}
Fetch all pages
{{ fetch:pages }}
Fetch multiple pages
{{ fetch pages="/,/about,/contact-us" }}
Example passing data into a Vue component
<my-component :data='{{ fetch:pages }}'></my-component>
JS
Fetch a single global
axios.get('/!/Fetch/global/opening_hours').then(...);
Fetch all globals
axios.get('/!/Fetch/globals').then(...);
Fetch multiple globals
var globals = 'general, contact_info, opening_hours';
axios.get('/!/Fetch/globals/?globals='+encodeURIComponent(globals)).then(...);
Tag
Fetch a single global
{{ fetch global="opening_hours" }}
Fetch all globals
{{ fetch:globals }}
Fetch multiple globals
{{ fetch globals="general, contact_info, opening_hours" }}
Example passing data into a Vue component
<my-component :data='{{ fetch:globals }}'></my-component>