如何解决如何在 SvelteKit 中初始化 ApolloClient 以同时在 SSR 和客户端上工作
我尝试过,但没有奏效。得到一个错误:评估 SSR 模块时出错 /node_modules/cross-fetch/dist/browser-ponyfill.js:
<script lang="ts">
import fetch from 'cross-fetch';
import { ApolloClient,InMemoryCache,HttpLink } from "@apollo/client";
const client = new ApolloClient({
ssrMode: true,link: new HttpLink({ uri: '/graphql',fetch }),uri: 'http://localhost:4000/graphql',cache: new InMemoryCache()
});
</script>
解决方法
对于 SvelteKit,CSR 与 SSR 的主题以及数据获取应该发生的地方比其他有些“类似”的解决方案更深入一些。波纹管指南应该可以帮助您连接一些点,但需要先说明几件事。
要定义服务器端路由,请在 .js
目录树中的任意位置创建一个带有 src/routes
扩展名的文件。此 .js
文件可以包含所需的所有导入语句,而无需将它们引用的 JS 包发送到网络浏览器。
@apollo/client
非常庞大,因为它包含 react
依赖项。相反,即使您将 Apollo Client 设置为仅在服务器端使用,您也可能需要考虑只导入 @apollo/client/core
,如下面的演示所示。 @apollo/client
不是 ESM 包。注意它是如何导入的,以便项目成功地使用节点适配器构建。
尝试执行以下步骤。
- 创建一个新的 SvelteKit 应用并在 SvelteKit 设置向导的第一步中选择“SvelteKit 演示应用”。回答“使用 TypeScript?”
N
的问题以及之后的所有问题。
npm init svelte@next demo-app
cd demo-app
- 相应地修改
package.json
。 (可选)使用npx npm-check-updates -u
检查所有软件包更新
{
"name": "demo-app","version": "0.0.1","scripts": {
"dev": "svelte-kit dev","build": "svelte-kit build --verbose","preview": "svelte-kit preview"
},"devDependencies": {
"@apollo/client": "^3.3.15","@sveltejs/adapter-node": "next","@sveltejs/kit": "next","graphql": "^15.5.0","node-fetch": "^2.6.1","svelte": "^3.37.0"
},"type": "module","dependencies": {
"@fontsource/fira-mono": "^4.2.2","@lukeed/uuid": "^2.0.0","cookie": "^0.4.1"
}
}
- 相应地修改
svelte.config.js
。
import node from '@sveltejs/adapter-node';
export default {
kit: {
// By default,`npm run build` will create a standard Node app.
// You can create optimized builds for different platforms by
// specifying a different adapter
adapter: node(),// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte'
}
};
- 使用以下内容创建
src/lib/Client.js
文件。这是 Apollo 客户端安装文件。
import fetch from 'node-fetch';
import { ApolloClient,HttpLink } from '@apollo/client/core/core.cjs.js';
import { InMemoryCache } from '@apollo/client/cache/cache.cjs.js';
class Client {
constructor() {
if (Client._instance) {
return Client._instance
}
Client._instance = this;
this.client = this.setupClient();
}
setupClient() {
const link = new HttpLink({
uri: 'http://localhost:4000/graphql',fetch
});
const client = new ApolloClient({
link,cache: new InMemoryCache()
});
return client;
}
}
export const client = (new Client()).client;
- 使用以下内容创建
src/routes/qry/test.js
。这是服务器端路由。如果 graphql 架构没有double
函数指定不同的查询、输入和输出。
import { client } from '$lib/Client.js';
import { gql } from '@apollo/client/core/core.cjs.js';
export const post = async request => {
const { num } = request.body;
try {
const query = gql`
query Doubled($x: Int) {
double(number: $x)
}
`;
const result = await client.query({
query,variables: { x: num }
});
return {
status: 200,body: {
nodes: result.data.double
}
}
} catch (err) {
return {
status: 500,error: 'Error retrieving data'
}
}
}
- 在
load
标签内的routes/todos/index.svelte
文件的<script context="module">...</script>
函数中添加以下内容。
try {
const res = await fetch('/qry/test',{
method: 'POST',credentials: 'same-origin',headers: {
'Content-Type': 'application/json'
},body: JSON.stringify({
num: 19
})
});
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
- 最后执行
npm install
和npm run dev
命令。在您的 Web 浏览器中加载该站点,并在您将鼠标悬停在导航栏上的TODOS
链接上时,查看从客户端查询的服务器端路由。在控制台的网络选项卡中,请注意test
路由对每秒和后续请求的响应速度有多快,这要归功于 Apolloclient
实例是单例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。