crelte / / LoadData

Type Alias: LoadData<A1>

type LoadData<A1> = 
  | LoadDataFn<A1>
  | Query
  | LoadDataObj<A1>
  | LoadDataArray<A1>
  | string
  | number
  | null
  | undefined;

Load data function

There are three main ways loadData can be defined:

Object

This is the most common way loadData will be used. Each property should be a loadData type, each one is called in parallel. And will be available to your component with the same name.

import entriesQuery from '@/queries/entries.graphql';
import { loadData as headerLoadData } from '@/layout/header.svelte';

export const loadData = {
    entries: entriesQuery,
    header: headerLoadData
};

GraphQl

You can just export a graphql query as a loadData type. This will export all queries from the graphql file as properties.

import blogsQuery from '@/queries/blogs.graphql';

export const loadData = blogsQuery;

Function

Using a function gives you the most flexibility but also is the most cumbersome.

import articlesQuery from '@/queries/articles.graphql';

export async function loadData(cr, entry) {
    return await cr.query(articlesQuery, {
        category: entry.category
    });
}

// or
export const loadData = (cr, entry) => cr.query(articlesQuery, {
    category: entry.category
});

// or if you're in the context of an object
export const loadData = {
    articles: (cr, entry) => cr.query(articlesQuery, {
        category: entry.category
    })
}

Type Parameters

A1

A1 = any