前言
Apollo GraphQL 是一个功能强大的开源 GraphQL 解决方案,包括 Apollo Client、Apollo Server、Apollo Engine 等一系列工具和库。其中,@apollographql/graphql-language-service-interface 是一个为提供编辑器中自动补全和错误信息的 GraphQL 语言服务器接口。
本文将详细介绍 @apollographql/graphql-language-service-interface 的使用,可供前端开发者学习和使用。
什么是语言服务器接口?
语言服务器接口(Language Server Interface,LSI)是一个为编辑器提供代码补全、错误检查、重构等功能的标准化协议。这个协议将编辑器和语言服务器解耦,让开发者能够使用不同的语言服务器。
安装
可以使用 npm 安装 @apollographql/graphql-language-service-interface
--- ------- -------------------------------------------------
使用
首先,我们需要创建一个实现了 LSP 的 GraphQL 语言服务。在此,我们将使用 TypeScript 作为实例的编程语言。
------ - ------------- - ---- ----------------- ------ - --------------- - ---- ---------------------------------------------------- ----- ------------- - --- --------------- ---------- ----- --- ----- ---------------------- - --- ---------------- ---------------------------------- --
创建 GraphQLConfig 对象的 fileNames 属性是必需的,因为该属性将告诉 GraphQL 配置文件在哪里找到您的 GraphQL 文件。这个对象还负责加载您的配置,包括 schema、客户端配置和外部变量。
LanguageService 构造函数接收 GraphQL client,并创建一个基于这个 client 的 GraphQL 语言服务。
现在,我们可以将服务绑定到任何语言服务器上,并启动监听 LSP 请求:
------ - ----------------- ---------------- - ---- ------------------------ ----- ------ - --------------------------------------- ---------------------- -- - ------ - ------------- - ----------------- - ---------- ----- ------- - -- ------------------- - ---------------- ---- - - - --- ------------------------------------------ -- - ------ ------------------------------------- -------------------------------------- ----------------------------- -- --- ----------------
此处我们使用了 VSCode 的 LSP API,绑定我们的语言服务并监听 LSP 请求,包括文本同步和代码补全。
getCompletion
方法接收两个参数:
- textDocument URI,用于在服务中定位文档
- position,用于在所请求的文本中定位请求的代码补全
示例代码
------ - ------------- - ---- ----------------- ------ - --------------- - ---- ---------------------------------------------------- ------ - ----------------- ---------------- - ---- ------------------------ ----- ------------- - --- --------------- ---------- -------------------- --- ----- ---------------------- - --- ---------------- ---------------------------------- -- ----- ------ - --------------------------------------- ---------------------- -- - ------ - ------------- - ----------------- - ---------- ----- ------- - -- ------------------- - ---------------- ---- - - - --- ------------------------------------------ -- - ------ ------------------------------------- -------------------------------------- ------------------------------ ---------------------------- -- --- ----------------
总结
本教程介绍了 @apollographql/graphql-language-service-interface 的基础使用方法,可以在编辑器中提供更好的 GraphQL 语言支持。希望本文可以帮助到前端开发者,并引起更多人对 GraphQL 技术的关注。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedae6fb5cbfe1ea0610e47