3
gProxy首页、文档和下载 - GraphSQL 客户端 - OSCHINA - 中文开源技术交流社区
source link: https://www.oschina.net/p/gproxy
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
gProxy首页、文档和下载 - GraphSQL 客户端 - OSCHINA - 中文开源技术交流社区
gProxy 是 SvelteKit 的 GraphSQL 客户端和缓存扩展包。
npm install --save @leveluptuts/g-query graphql-tag
// src/lib/config/g.ts
export const g = new GFetch({
path: 'https://yourapiurl.com/graphql' //whatever your api url is here
// More config options coming, for now this is just path to your graphql api
});
添加代码生成器:
// svelte.config.js
import gQueryCodegen from '@leveluptuts/g-query/codegen'
...
vite: {
plugins: [
gQueryCodegen({
// Required
// schema: 'http://localhost:3001/graphql' // this can also be a url to a graphql api
schema: './src/lib/graphql/schema.graphql', // path to schema, schema is required
output: './src/lib/graphql', // Where you want the general schema types to output
gPath: '$lib/config/g' // Path to g, created in step 1.
// Optional
debug: false // boolean, this adds logging for gq files deleted and on codegen
})
],
}
添加 GraphSQL 文件:
// UserQueries.graphql
query currentUser {
user {
_id
}
}
<script context="module" lang="ts">
// The generated function that fetches and caches
import { getCurrentUser } from './UserQueries.gq';
export async function load({ fetch }) {
// Runs the cache/fetch function populating $currentUser before use.
await getCurrentUser({
variables: { limit: 0 },
fetch // Don't forget to pass fetch for ssr
});
return {};
}
</script>
<script lang="ts">
// Cache becomes populated with data available for SSR
import { user } from './UserQueries.gq';
// $: console.log($user.user) //data available for ssr
</script>
展开阅读全文
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK