当前位置: 首页 > news >正文

Nextjs 使用 graphql,并且接入多个节点

写在前面

随着区块链技术的流行,也促进了 subgraph 工具的兴起。那么如何在前端接入 graphql 节点就成了关键,其接入方式既存在与 restful 接口相类似的方式,也有其独特接入风格。本文将介绍如何接入 graphql 以及如何应对多个 graphql 节点的情况。

如有不当之处,还望批评指正。

什么是 graphql

官网:https://graphql.org/

GraphQL 服务是通过定义类型和这些类型的字段来创建的,然后为每种类型的每个字段提供函数。例如,告诉您登录用户是谁(我)以及该用户名的 GraphQL 服务可能如下所示:

type Query {me: User
}type User {id: IDname: String
}

GraphQL 服务运行后(通常在 Web 服务的 URL 上),它可以接收 GraphQL 查询以进行验证和执行。服务首先检查查询以确保它仅引用定义的类型和字段,然后运行提供的函数以生成结果。
例如,查询:

{me {name}
}

可以产生以下 JSON 结果:

{"me": {"name": "My Name"}
}

接入 graphql

Fetch

由于 HTTP 的普遍性,它是使用 GraphQL 时最常见的客户端-服务器协议选择。我们可以通过 HTTP 来请求 graphql 接口。

  const data = await fetch("https://your-api-domain/graphql",{method: "POST",body: JSON.stringify({query: '{ me { name } }',}),headers: {"Content-Type": "application/json",},}).then((res) => res.json());

如示例代码所示,可以直接通过请求 graphql 的地址,其 body 则是所请求字段的 schema。

apollo-client

除了使用原生的 fetch 方法外,还可以通过市面上的工具库请求,我采用的则是 apollo/client
安装依赖:

npm install @apollo/client@rc @apollo/experimental-nextjs-app-support

创建一个文件,用于随时随地获取注册完的 ApollpClient

// lib/client.js
import { HttpLink, InMemoryCache, ApolloClient } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";export const { getClient } = registerApolloClient(() => {return new ApolloClient({cache: new InMemoryCache(),link: new HttpLink({uri: "https://your-api-domain/graphql",}),});
});

registerApolloClient 里面判断是否存在 ApolloClient,不存在则创建一个新实例。而我们只需要通过 getClient 就能够获取 ApolloClient。

Server Side

在服务端渲染的组件中,是不允许使用 use- 的 hooks 的,因此可以这么使用 ApolloClient:

// app/page.tsx
import { getClient } from "@/lib/client";import { gql } from "@apollo/client";export const revalidate = 5;
const query = gql`query Now {now(id: "1")
}`;export default async function Page() {const client = getClient();const { data } = await client.query({ query });return <main>{data.now}</main>;
}
Client Side

那么在 Client 端,则可以使用以下步骤在 client 端渲染的组件中使用:

// lib/apollo-provider.js
"use client";import { ApolloLink, HttpLink } from "@apollo/client";
import {ApolloNextAppProvider,NextSSRInMemoryCache,NextSSRApolloClient,SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";function makeClient() {const httpLink = new HttpLink({uri: "https://your-api-domain/graphql",});return new NextSSRApolloClient({cache: new NextSSRInMemoryCache(),link:typeof window === "undefined"? ApolloLink.from([new SSRMultipartLink({stripDefer: true,}),httpLink,]): httpLink,});
}export function ApolloWrapper({ children }: React.PropsWithChildren) {return (<ApolloNextAppProvider makeClient={makeClient}>{children}</ApolloNextAppProvider>);
}

在 app/layout 中使用 ApolloWrapper,便可以将 Apollo 的相关数据注入到 context 中:

// app/layout.js
import { ApolloWrapper } from "/@lib/apollo-wrapper";export default function RootLayout({children,
}: {children: React.ReactNode,
}) {return (<html lang="en"><body><ApolloWrapper>{children}</ApolloWrapper></body></html>);
}

最后在任何需要请求的时候,使用 useSuspenseQuery 获取数据即可:

"use client";import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";import { gql } from "@apollo/client";const query = gql`query Now {now(id: "1")
}`;export default function Page() {const { data } = useSuspenseQuery(query);return <main>{data.now}</main>;
}

接入多个 graphql 节点

上述讲述了通过 new HttpLink 来生成请求后端的链接,那么我们如何处理多个 api 节点时的情况呢?

多个 Link

首先仍是采用 HttpLink 生成不同 api 节点的链接:


const firstLink = new HttpLink({uri: 'https://your-first-api-doamin',
});
const secondLink = new HttpLink({uri: 'https://your-second-api-doamin',
});
const defaultLink = new HttpLink({ uri: 'https://your-default-api-doamin' });

拼接 Link

让我们创建一个特殊的 function 来完成链接管理的所有工作:

type LinkConditionPair = {condition: (operation: Operation) => boolean;link: HttpLink;
};function getApolloLink(pairs: LinkConditionPair[]): ApolloLink {if (pairs.length === 1) {return pairs[0].link;} else {const [firstPair, ...restPairs] = pairs;return ApolloLink.split(firstPair.condition,firstPair.link,getApolloLink(restPairs));}
}

初始化 Client

然后我们初始化 Client,将多个 api 节点传递给 NextSSRApolloClient

const client = new NextSSRApolloClient({cache: new NextSSRInMemoryCache(),link: getApolloLink([{condition: (operation: Operation) =>operation.getContext().apiName === "first",link: firstLink,},{condition: (operation: Operation) =>operation.getContext().apiName === "second",link: secondLink,},{condition: () => true,link: defaultLink,},]),
});

完整代码

'use client';import { Operation } from '@apollo/client';
import { ApolloLink, HttpLink } from '@apollo/client';
import {ApolloNextAppProvider,NextSSRApolloClient,NextSSRInMemoryCache,SSRMultipartLink,
} from '@apollo/experimental-nextjs-app-support/ssr';const firstLink = new HttpLink({uri: 'https://your-first-api-doamin',
});
const secondLink = new HttpLink({uri: 'https://your-second-api-doamin',
});
const defaultLink = new HttpLink({ uri: 'https://your-default-api-doamin' });
type LinkConditionPair = {condition: (operation: Operation) => boolean;link: HttpLink;
};function getApolloLink(pairs: LinkConditionPair[]): ApolloLink {if (pairs.length === 1) {return pairs[0].link;} else {const [firstPair, ...restPairs] = pairs;return ApolloLink.split(firstPair.condition,firstPair.link,getApolloLink(restPairs),);}
}function makeClient() {const httpLink = getApolloLink([{condition: (operation: Operation) => operation.getContext().apiName === 'first',link: firstLink,},{condition: (operation: Operation) =>operation.getContext().apiName === 'second',link: secondLink,},{condition: () => true,link: defaultLink,},]);return new NextSSRApolloClient({cache: new NextSSRInMemoryCache(),link:typeof window === 'undefined'? ApolloLink.from([new SSRMultipartLink({stripDefer: true,}),httpLink,]): httpLink,});
}export const ApolloWrapper = ({children,
}: {children: React.PropsWithChildren;
}) => {return (<ApolloNextAppProvider makeClient={makeClient}>{children}</ApolloNextAppProvider>);
};

而我们调用请求的时候,则只需要传递 context 就行:

const { data } = useSuspenseQuery(..., { context: { apiName: 'first' } });

总结

当然,对于请求多个后端节点,我们可以简单粗暴地通过 fetch 来请求不同的后端接口实现功能,也可以声明多个 ApolloClient 实例来区分不同的后端节点。方法有很多,并没有完全的最佳解决方案。

上面是我尝试使用 apollo/client 来请求 graphql 的过程,以及通过配置 link 来请求多个后端实例的尝试。在此记录下,如有问题,还请指正。

参考:
Graphql 官网
React/Next.js: Working with multiple GraphQL endpoints and automatic type generation via Apollo Client
How to use Apollo Client with Next.js 13

相关文章:

Nextjs 使用 graphql,并且接入多个节点

写在前面 随着区块链技术的流行&#xff0c;也促进了 subgraph 工具的兴起。那么如何在前端接入 graphql 节点就成了关键&#xff0c;其接入方式既存在与 restful 接口相类似的方式&#xff0c;也有其独特接入风格。本文将介绍如何接入 graphql 以及如何应对多个 graphql 节点…...

小结——知识注入

所谓知识注入&#xff0c;其实不该脱离于LLM的基础工作原理&#xff0c;然后空谈抽象概念。 知识&#xff0c;也就是你问他问题&#xff0c;他能输出正确的回答&#xff0c;这只是一个简单的输出token的过程。输出得准了&#xff0c;就是知识&#xff0c;输出不准了&#xff0c…...

科普文:微服务之Spring Cloud Alibaba组件Nacos一致性协议Distro+Raft概叙

一、概要 Nacos是阿里开放的一款中间件&#xff0c;它主要提供三种功能&#xff1a;持久化节点注册&#xff0c;非持久化节点注册和配置管理。 二、一致性协议 - AP/CP Nacos不是纯粹的AP服务&#xff0c;也不是纯粹的CP服务&#xff0c;而是两者同时支持。 这要从服务注册…...

python合并音视频-通过ffmpeg合并音视频

&#x1f308;所属专栏&#xff1a;【python】✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您的…...

Yolov8添加ConvNetV1和V2模块

Yolov8添加ConvNet模块 1 ConvNet系列相关内容 &#xff08;1&#xff09;2022 论文地址&#xff1a;A ConvNet for the 2020s Code Link 如下图所示&#xff0c;精度、效率、尺寸都很不错。 论文的摘要如下&#xff1a; 视觉识别的“咆哮的 20 年代”始于视觉注意力 &…...

​十个常见的 Python 脚本 (详细介绍 + 代码举例)

1. 批量重命名文件 介绍: 该脚本用于批量重命名指定目录下的文件&#xff0c;例如将所有 ".txt" 文件重命名为 ".md" 文件。 import osdef batch_rename(directory, old_ext, new_ext):"""批量重命名文件扩展名。Args:directory: 要处理…...

【C语言】详解feof函数和ferror函数

文章目录 前言1. feof1.1 feof函数原型1.2 正确利用函数特性读写文件1.2.1 针对文本文件1.2.2 针对二进制文件 1.3 feof函数的原理1.4 feof函数实例演示 2. ferror2.1 ferror函数原型 前言 或许我们曾在网络上看过有关于feof函数&#xff0c;都说这个函数是检查文件是否已经读…...

ValueListenableBuilder 和 addListener 在 ChangeNotifier的区别

1、前言 ValueListenableBuilder 和 addListener 在 ChangeNotifier 中有不同的用途和用法&#xff0c;适用于不同的场景。它们的主要区别在于它们如何监听和响应状态变化&#xff0c;以及它们的用法和特性。 2、ValueListenableBuilder用法 ValueListenableBuilder 是一个 …...

ScriptEcho:AI赋能的前端代码生成神器

ScriptEcho&#xff1a;AI赋能的前端代码生成神器 在前端开发中&#xff0c;如果你总是觉得写代码太费时费力&#xff0c;那么 ScriptEcho 将成为你的救星。这个 AI 代码生成平台不仅能帮你省下大量时间&#xff0c;还能让你轻松愉快地写出生产级代码。本文将带你了解 ScriptEc…...

TypeError: ‘float’ object is not iterable 深度解析

TypeError: ‘float’ object is not iterable 深度解析与实战指南 在Python编程中&#xff0c;TypeError: float object is not iterable是一个常见的错误&#xff0c;通常发生在尝试对浮点数&#xff08;float&#xff09;进行迭代操作时。这个错误表明代码中存在类型使用不…...

灵茶八题 - 子序列 +w+

灵茶八题 - 子序列 w 题目描述 给你一个长为 n n n 的数组 a a a&#xff0c;输出它的所有非空子序列的元素和的元素和。 例如 a [ 1 , 2 , 3 ] a[1,2,3] a[1,2,3] 有七个非空子序列 [ 1 ] , [ 2 ] , [ 3 ] , [ 1 , 2 ] , [ 1 , 3 ] , [ 2 , 3 ] , [ 1 , 2 , 3 ] [1],[…...

为什么美元债务会越来越多?

美元债务规模持续膨胀&#xff0c;其背后原因复杂多样&#xff0c;可归结为以下几个主要因素&#xff1a; 财政赤字和刺激政策是导致美元债务增加的重要原因。美国政府长期面临财政赤字问题&#xff0c;支出远超收入&#xff0c;为弥补这一缺口&#xff0c;政府不得不大量发行…...

二维凸包算法 Julia实现

问题描述&#xff1a;给定平面上 n n n 个点的集合 Q Q Q&#xff0c;求其子集 P P P 构成 Q Q Q 的凸包&#xff0c;即 ∀ p ∈ Q , ∃ p 0 , p 1 , p 2 ∈ P \forall p \in Q, \exist p_0, p_1, p_2 \in P ∀p∈Q,∃p0​,p1​,p2​∈P 使得点 p p p 在以点 p 0 , p 1 …...

python dash框架

Dash 是一个用于创建数据分析型 web 应用的 Python 框架。它由 Plotly 团队开发&#xff0c;并且可以用来构建交互式的 web 应用程序&#xff0c;这些应用能够包含图表、表格、地图等多种数据可视化组件。 Dash 的特点&#xff1a; 易于使用&#xff1a;Dash 使用 Python 语法…...

2.外部中断(EXTI)

理论 NVIC&#xff1a;嵌套向量中断控制器&#xff08;解释教程&#xff09; 外部通用中断线(EXTI0~EXTI15)&#xff1a;每个GPIO设置成中断模式&#xff0c;与中断控制器连接的线 外部中断触发方式 上升沿触发、下降沿触发、双边沿触发 外部中断触发函数 在stm32f1xx_it.c文件…...

Python | SyntaxError: invalid syntax 深度解析

Python | SyntaxError: invalid syntax 深度解析 在Python编程中&#xff0c;SyntaxError: invalid syntax是一个常见的错误&#xff0c;它表明Python解释器在尝试解析代码时遇到了语法问题。这个错误通常是由于代码中存在拼写错误、缺少符号&#xff08;如括号、冒号或逗号&a…...

付费进群系统源码原版最新修复全开源版

付费进群&#xff0c;和平时所见到的别人拉你进群是不一样的&#xff0c;付费进群需要先缴费以后&#xff0c;才会看到群的二维码&#xff0c;扫码进群或者是长按二维码图片识别进群&#xff0c;付费进群这个功能广泛应用于拼多多的砍价群&#xff0c;活动的助力群&#xff0c;…...

Docker容器部署的SpringBoot项目jar包,上传文件但是找不到路径的问题

在docker容器内部署的jar包运行后&#xff0c;请求访问都没有问题&#xff0c;在文件上传时&#xff0c;发现上传图片接口响应成功&#xff0c;但是图片路径报404错误&#xff0c;发现找不到路径。 在服务器上查看也没有找到相关图片。 原因&#xff1a; 启动docker镜像时没…...

云计算学习——5G网络技术

系列文章目录 提示&#xff1a;仅用于个人学习&#xff0c;进行查漏补缺使用。 Day1 网络参考模型 Day2 网络综合布线与应用 Day3 IP地址 Day4 华为eNSP网络设备模拟器的基础安装及简单使用 Day5 交换机的基本原理与配置 Day6 路由器的原理与配置 Day7 网络层协议介绍一 Day8 传…...

matlab仿真 信道编码和交织(上)

&#xff08;内容源自详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真 刘学勇编著第八章内容&#xff0c;有兴趣的读者请阅读原书&#xff09; ​​​ ​ ​ ​ clear all N10;%信息比特的行数 n7;%hamming码组长度n2^m-1 m3;%监督位长度 [H,G]hammgen(m);%产生(n,n-…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...