npm 包 @apollographql/graphql-language-service-interface 使用教程

前言

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


猜你喜欢

  • npm 包 build-array 使用教程

    npm 包是前端开发中不可或缺的工具,而 build-array 更是帮助我们快速生成数组的实用工具。本文将分以下几段详细介绍 build-array 的使用方法,提供有深度的学习和指导意义。

    4 年前
  • npm 包 apr-engine-iterator 使用教程

    在前端开发中,往往需要对一组数据进行迭代处理,以便进行显示或者处理。但是进行手动的迭代处理往往繁琐而且容易引起错误。这时候,npm 包 apr-engine-iterator 就能够帮助我们轻松解决这...

    4 年前
  • npm 包 apr-engine-run 使用教程

    前言 在前端开发中,我们经常会使用一些第三方库来加快我们开发的速度。通常,我们使用 npm 来管理这些库和工具包。在这篇文章中,我将要介绍一个名为 apr-engine-run 的 npm 包,它可以...

    4 年前
  • npm 包 apr-engine-each 使用教程

    前言 apr-engine-each 是一个适用于前端开发的 npm 包,它可以对集合中的每个元素进行类似于 forEach 的处理。但不同的是,apr-engine-each 在处理时可以返回一个 ...

    4 年前
  • npm 包 apr-reduce 使用教程

    在前端开发中,使用 JavaScript 进行数据处理是非常常见的。如果遇到数据集较大的情况,可能会出现性能问题。这时候可以使用 apr-reduce 这个 npm 包来提高数据处理效率。

    4 年前
  • npm 包 apr-parallel 使用教程

    介绍 npm 包 apr-parallel 是一个可以在 Node.js 中执行并行操作的工具,它允许我们构建高效、并发性能强大的应用程序。此外,apr-parallel 还可以轻松地控制并行任务的数...

    4 年前
  • npm 包 bup 使用教程

    背景 在 Web 开发中,为了保证代码的可维护性和可重用性,我们常常会把一些常用的功能封装成一个个 npm 包。本文将介绍如何使用一个名为 bup 的 npm 包来进行前端开发中常用的打包和压缩文件的...

    4 年前
  • npm 包 @types/wnumb 使用教程

    在前端开发中,经常需要对数字进行格式化,比如处理货币金额、百分比等等。Wnumb 是一个用于数值格式化的 JavaScript 库,提供了丰富的格式化选项以及定制化能力。

    4 年前
  • npm 包 @tippy.js/react 使用教程

    前言 在前端开发中,我们经常需要实现一些交互效果,例如鼠标悬浮时弹出提示框、拖拽等动态效果等等。这个时候,我们可以使用一些优秀的 JavaScript 库来快速实现这些效果。

    4 年前
  • 教你使用 docz-rollup 打包 npm 包

    在前端开发中,封装一个 npm 包是很常见的事情。然而,为了方便别人使用自己的包,在推荐使用文档生成器和打包工具进行开发和打包。这篇文章将带你学习如何使用 docz-rollup 这样的工具,让你的 ...

    4 年前
  • npm 包 load-cfg 使用教程

    前言 如果你不了解 npm 是什么以及它的作用,建议你先去了解一下 npm 的基本知识。 在使用 npm 包的过程中,我们经常需要加载一些配置文件,例如一些环境变量等等。

    4 年前
  • npm 包 react-docgen-actual-name-handler 使用教程

    在前端开发中,我们经常使用 React 来构建用户界面。但是,当我们开始编写复杂的 React 组件库时,我们需要一种自动化的解决方案来生成组件 API 文档。这就是 react-docgen-act...

    4 年前
  • npm 包 docz-core 使用教程

    在前端开发中,我们经常需要编写文档来记录每个组件的用法、参数和样式等信息,以便团队成员之间的沟通和交流。而手动编写文档往往是一件繁琐而又枯燥的事情,需要花费大量的时间和精力。

    4 年前
  • npm 包 gatsby-plugin-eslint 使用教程

    在现代的前端开发中,代码质量和规范性变得愈发重要。ESLint 是一个广泛使用的 JavaScript 静态代码分析工具,可以通过检查代码中的语法和风格错误来提高代码质量和可读性。

    4 年前
  • npm 包 babel-plugin-export-metadata 使用教程

    前言 在前端开发中,我们经常会用到 Babel 来进行代码编译。而 babel-plugin-export-metadata 就是一个 Babel 插件,用于在编译过程中导出一些元数据信息,在开发过程...

    4 年前
  • npm 包 gatsby-plugin-react-helmet-async 使用教程

    什么是 gatsby-plugin-react-helmet-async? gatsby-plugin-react-helmet-async 是一个 Gatsby 插件,它允许您在 React 组件中...

    4 年前
  • npm 包 gatsby-plugin-root-import 使用教程

    前言 在前端开发中,我们经常需要引入一些文件或者库。有时候,我们会发现在引入文件或者库的时候,路径过长,难以识别,不利于代码的阅读和维护。例如,有时候我们需要引入一个文件,路径如下: ------ -...

    4 年前
  • npm 包 mdx-utils 使用教程

    在前端开发中,我们常常需要处理 Markdown 格式的文本。而 mdx-utils 就是一款专门用来处理 Markdown 文件的 npm 包。本文将详细介绍如何使用 mdx-utils,包括 AP...

    4 年前
  • npm 包 docz-utils 使用教程

    在前端开发过程中,我们时常需要编写组件文档,docz 是一个非常好用的库来实现文档自动生成,而 docz-utils 是它的核心工具库,它提供了很多方便的方法。这篇文档主要介绍如何使用 docz-ut...

    4 年前
  • npm 包 rehype-docz 使用教程

    前言 前端开发人员在开发过程中不光需要学习掌握前端基础知识,还需要掌握一些辅助工具和技术。今天要介绍的一个工具便是 npm 包 rehype-docz。 rehype-docz 是一种用于编写文档、教...

    4 年前

相关推荐

    暂无文章