在 SvelteKit 环境中使用 GraphQL

1 年 ago

科, 雅

2 minutes

在SvelteKit环境下使用GraphQL。

我刚刚开始使用SvelteKit，我非常喜欢它能够简洁地编写代码并且轻松地进行服务器端渲染的功能。
虽然根据邓宁-克鲁格效应，我可能处于“完全理解”的状态，但我还是会记录下我所学到的东西。

我想做的事。

由于我们已经在后端开发了GraphQL，所以我希望能够在前端使用通过GraphQL定义的类型、查询和变更，而无需再次定义它们。
请根据以下链接进行操作。不过要注意，由于文档的可重现性较低且自古以来就不易阅读。。。

https://the-guild.dev/graphql/codegen/docs/guides/svelte 的中文意思是：这是一个关于如何在Svelte中使用GraphQL Codegen的指南。

https://zenn.dev/takurinton/articles/76582f25d942f0 的中文意思是：这是一篇关于使用Zenn的文章，作者是takurinton，标题为“76582f25d942f0”。

关于环境

Ubuntu 22.04
svelte 3.54.0
@graphql-codegen/cli 2.16.4
@graphql-codegen/typescript 2.8.7
@graphql-codegen/typescript-operations 2.5.12

进步的方法

结果如下：无法解决svelte-apollo中的不可解错误，无法进行初始引导，所以我放弃了。是有什么bug吗？
因此，我决定自己创建@apollo/client的实例，并将其引用到CodeGen生成的代码中。

建立

# 素のアプリケーション作成
npm create svelte@latest myapp
cd myapp 
npm install

# code generatorを入れる
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations graphql-codegen-svelte-apollo

# apollo clientをいれる
npm install --save @apollo/client

请按照以下方式添加代码生成器的设置。

schema:
  - http://localhost:8080/graphql:
documents:
  - ./src/**/*.gql
generates:
  './src/graphql/generated.ts':
    plugins:
      - typescript
      - typescript-operations
      - graphql-codegen-svelte-apollo
    config:
      clientPath: ../lib/graphql/apollo

我们需要创建一个文件，将Apollo Client默认导出。此文件的位置应与codegen.yml文件中generates.config.clientPath相一致。
此外，还要准备一个函数来更新idToken，并将其导出。（每次需要更新令牌时，只需调用此函数即可）

import { ApolloClient, InMemoryCache } from '@apollo/client/core/core.cjs'
import { HttpLink } from '@apollo/client/link/http/http.cjs'

const cache = new InMemoryCache()
const client = new ApolloClient({
  cache,
})

const newLink = (idToken: string) => {
  return new HttpLink({
    uri: 'https://MY_GRAPHQL_HOST/graphql',
    headers: {
      Authorization: `Bearer ${idToken}`,
    },
  })
}

export default client
export const updateClientWithIdToken = (idToken: string) => {
  const newHttpLink = newLink(idToken)
  client.setLink(newHttpLink)
}

在Firebase身份验证的情况下，更新的方式如下…

getAuth().onAuthStateChanged(async (user) => {
  if (!!user) {
    const idToken = await user.getIdToken()
    updateClientWithIdToken(idToken)
  }
}

尝试使用

先写一个Query或Mutation，放在任何codegen.yml指定的documents位置都可以。

mutation SomeMutation {
   someMutation {
    id
    uid 
    validUntil
    createdAt
  }
}

由于npx graphql-codegen会自动生成代码，所以让我们立即尝试使用它。

<script lang="ts">
  import { onMount } from 'svelte'
  import { SomeMutation } from '../../../../graphql/generated'
  import store from './store'

  onMount(async () => {
    const result = await SomeMutation({})
    store.set(result.data?.someMutation)
  })
</script>

{$store?.id} <-- こんな感じで参照する。型も自動生成されるので、IntelliSenseが効いてとても便利です。

总结

在建立环境时由于文件数量太少而遇到了很大的困难，但除此之外一切顺利进行。如果对某人有所帮助，我会感到幸运。

在前端方面，我喜欢尽量避免进行类型定义等业务逻辑，而是将注意力集中在表示层上。这与我非常接近并且我很喜欢。

♥ Svelte/Kit，GraphQL