此文档尚未为 SDK 的最新版本更新

如何运作

"证据SDK"包含了构建交互式数据应用程序所需的所有工具,从数据库一直到浏览器.

• 数据源连接器 - 连接各种数据ours的插件,包括数据库、API、平板文件等
• 在浏览器中运行查询 - 通用 SQL 是使用 DuckDB WASM 和您的数据库最快的方法

安装

1. 如果需要, 请创建您的 SvelteKit 工程( 例如 ) . npm create svelte(中文(简体) )
2. 安装 SDK npm i @evidence-dev/sdk@preview
3. 使用 SDK 添加到您的项目中 npx evidence-sdk add
4. 使用 npx evidence-sdk plugins install 如果您没有安装插件 add
   5. 如果您想要使用的数据源没有列出,并且有一个证据插件,您可以安装软件包并添加到 evidence.config.yaml 手动.
5. 创建新连接 npx evidence-sdk connections edit
   1. 连接一旦建立,将出现新的 sources/[connection] 目录,对于大多数连接器,您需要创建一些源查询.
6. 用 npx evidence-sdk sources

使用量

见 维基百科

使用证据SDK执行查询有两种方法 <code/> 要素,和呼叫 runQuery 直接说. <code/> 元素自动将其结果提供给儿童组件(或页面,如果在布局中使用),同时 runQuery 将查询范围保留到当前页面.

使用 <code/>

写入查询

要在页面上添加查询,请使用 <code/> 元素,带有 evidence-query-name 属性( e)lang=sql 可选但建议).

把它包起来 <pre> 标签将防止格式化者更改您的 SQL .

示例

<pre><code evidence-query-name="myFirstQuery" lang="sql">
SELECT * FROM my_first_table
</code></pre>

使用时 <code/>,您可以使用 模板字符串语法,斯维尔特语法不支持.

工作示例:

<pre><code evidence-query-name="myFirstQuery" lang="sql">
SELECT * FROM my_first_table WHERE user_id = '${selectedUserId}'
</code></pre>

断开的示例 :

<pre><code evidence-query-name="myFirstQuery" lang="sql">
SELECT * FROM my_first_table WHERE user_id = '{selectedUserId}'
</code></pre>

访问查询

要装入放置在页面上的查询,请创建查询存储的引用 $evidence/queries

<script>
    import { getQueries } from '$evidence/queries';
    const queries = getQueries();
    /** @type {import("@evidence-dev/query-store").QueryStore} */
    let { myFirstQuery } = $queries;
    $: ({ myFirstQuery } = $queries);
</script>

$queries 是一组 QueryStore 根据网页上提供的内容.

完整示例

<script>
    import { getQueries } from '$evidence/queries';
    const queries = getQueries();
    /** @type {import("@evidence-dev/query-store").QueryStore} */
    let { myFirstQuery } = $queries;
    $: ({ myFirstQuery } = $queries);
</script>

<pre><code evidence-query-name="myFirstQuery" lang="sql">
SELECT * FROM my_first_table
</code></pre>

{#if !$myFirstQuery.loaded}
    <!-- 
        The query has not yet loaded.
        $myFirstQuery.loading is also available, 
        but will be false if the store has not yet started to load.

        QueryStore should begin loading automatically when attempting to access data,
        but can be induced with .fetch()
     -->
    Loading...
{:else if $myFirstQuery.error}
    <!-- An error has been encountered -->
    Error: {$myFirstQuery.error.message}
{:else}
    <!-- Results have been loaded -->
    {#each $myFirstQuery as row (row.id)}
        Row ID: {row.id}
    {:else}
        No resuls available
    {/each}
{/if}

使用 runQuery

完整示例

<script>
    import { runQuery } from '$evidence/queries';

    const myFirstQuery = runQuery('myFirstQuery', 'SELECT 1');
    myFirstQuery.fetch(); // This is not done for you when using runQuery

    // Queries can by dynamic
    let x = 0;
    // declare here to ensure it is defined
    let dynamicQuery = runQuery('dynamicQuery', `SELECT ${x}`);
    // react to updates in the query string
    $: dynamicQuery = runQuery('dynamicQuery', `SELECT ${x}`);
    $: dynamicQuery.fetch();
</script>

<!-- Usage is the exact same as above -->
{#if !$myFirstQuery.loaded}
    <!-- 
        The query has not yet loaded.
        $myFirstQuery.loading is also available, 
        but will be false if the store has not yet started to load.

        QueryStore should begin loading automatically when attempting to access data,
        but can be induced with .fetch()
     -->
    Loading...
{:else if $myFirstQuery.error}
    <!-- An error has been encountered -->
    Error: {$myFirstQuery.error.message}
{:else}
    <!-- Results have been loaded -->
    {#each $myFirstQuery as row (row.id)}
        Row ID: {row.id}
    {:else}
        No resuls available
    {/each}
{/if}

启用安全部门改革

如果你正在使用 <code/> 方法,你只需要确保安装服务器钩子.

如果你正在使用 runQuery 方法,您需要使用 <QuerySSR/> 组件.

配置 SSR 虎克

1. 确保您拥有 ./src/hooks.server.[js|ts] 文件

2. 创建或更新 handle 函数以匹配 :

   • 要创建 :

   import { ssrHook } from '$evidence/ssrHook.svelte.js';
   
   /** @type {import('@sveltejs/kit').Handle} */
   export async function handle({ event, resolve }) {
    /** @type {{ name: string, queryString: string}[]} */
    const presentQueries = [];
    const response = await resolve(event, {
        transformPageChunk: ssrHook(presentQueries)
    });
    return response;
   }
   

   • 如果您已经使用 resolve 财务报告和审定财务报表 transformPageChunk,您可以链接到这样的函数:

   import { ssrHook } from '$evidence/ssrHook.svelte.js';
   
   /** @type {import('@sveltejs/kit').Handle} */
   export async function handle({ event, resolve }) {
       /** @type {{ name: string, queryString: string}[]} */
       const presentQueries = []
       const evidenceChunkTransform = ssrHook(presentQueries)
   
       const response = await resolve(event, {
           transformPageChunk: ({html, done}) => {
               // ... Do something to html
               html = await evidenceChunkTransform({ html, done })
               // ... Do other things to html
               return html
       });
       return response;
   }
   

使用 <QuerySSR/>

<QuerySSR/> 向证据预处理器登记您的询问,从而可以正确补水.

<script>
    import { runQuery } from '$evidence/queries';
    import QuerySSR from '$evidence/QuerySSR.svelte';

    let manualQuery = runQuery('x', `SELECT * FROM users`);
    $: manualQuery = runQuery('x', `SELECT * FROM users`);
</script>

<QuerySSR queries={[manualQuery]} />