Introduction Quick Start Configuration GraphQL Data Layer

GraphQL Data Layer

Simple Queries

Since Jungle works during build time, to query data in your Svelte files only a QUERY and a QUERYRES have to be added inside your script tags

<script>
const QUERY = `
	query {
		posts {
			title
			slug
		}
	}
`;
const QUERYRES = {};
...
</script>

Then access QUERYRES like any other variable

{#each QUERYRES.posts as post}
	...
{/each}

Dynamic Route Queries

For dynamic routes (those named [param].svelte), multiple routes can be generated from one route file, for blog pages, doc pages, etc. For example, with a blog route named [slug].svelte, script code could look like

<script>
const QUERY = `
    query {
        post(slug: "${QUERYPARAMS['slug']}") {
            title
            subtitle
            author
            slug
        }
    }
`;
const QUERYRES = {};

const QUERYPARAMOPTS = `
    query {
        posts {
            slug
        }
    }
`;
...
</script>

Jungle processes QUERYPARAMOPTS first, and in this case gets all options for slug from posts and makes a new route based on each option, filling in QUERYPARAMS['slug'] for each new route. The dynamic route parameter can be anything, as long as it matches up in QUERYPARAMOPTS and QUERYPARAMS for use in generating new routes.