1657797600
GraphQL 的主要优点之一是您可以通过一个模式查询所需的所有数据。这可能假设大多数系统是一个大型的单体服务。但是,随着模式的增长,可能需要将其拆分为更小的模式以进行维护。此外,随着微服务架构的普及,许多系统由负责提供数据的较小服务组成。
在这种情况下,需要提供客户端可以查询的统一 GraphQL 模式。否则,我们将回到传统 API 请求的一个缺点,您需要查询多个 API 才能获得所需的数据。
这就是模式拼接的用武之地。模式拼接使我们能够将多个图组合成一个可以从中获取数据的图。
在本文中,我们将使用一个实际示例来讨论模式拼接,它是如何工作的,以及如何跨多个模式合并类型。
模式拼接结合了多个子模式,并创建了一个称为网关的组合代理层,客户端可以使用它来发出请求。这意味着您可以将来自不同模块甚至不同远程服务的较小 GraphQL 模式组合到一个称为网关的模式中。
当请求来自客户端到网关时,网关将请求委托给负责提供所请求字段的子模式。
网关如何知道将请求委托给哪个子模式?当请求进入网关时,网关会查找拼接模式配置以了解哪个子模式负责解析请求的字段并将请求委托给子模式。
然后,它将从模式中获得的各种解析字段组合起来,并将它们发送给客户端。客户端通常不知道发出请求时发生了什么。
模式拼接的大部分好处都在后端。大图可以拆分成更小的图,每个团队负责维护他们的模式和他们解析的字段,而不影响开发其他图的开发人员。
现在,让我们用一个例子来说明模式拼接是如何工作的。要继续学习,您需要具备 GraphQL 的基本知识和 JavaScript 的知识。
由于我们的重点是模式拼接,我们将使用一个入门项目。在这个项目中,我们有两个带有其模式的子图和一个用于网关服务的文件夹。我们将看到如何将模式拼接到不同模块中的网关。请记住,大多数时候微服务的子模式通常在不同的服务器上运行,我们还将了解如何将远程模式拼接到网关。我们还将研究如何合并其部分定义存在于不同子模式中的类型。
让我们开始吧:
首先,在此处克隆项目。
这是我们将在本文中使用的整体项目结构和重要文件:
schema-stitching
- start // where we will be making most changes
- gateway
- index.js // where the schema stitching takes places
- book
- book.graphql
- resolvers.js
- index.js
- datasources
- books.json // mocked data for books
- BooksAPI.js
- review
- review.graphql
- resolvers.js
- datasources
- reviews.json // mocked reviews
- ReviewsAPI.js
- final // Find the complete project here which you can make reference to
接下来,让我们安装网关的依赖项。在start
目录中,运行以下命令:
cd 启动/网关 npm install
让我们构建我们的网关服务器并查看模式拼接的实际效果。我们将index.js
在网关文件夹中找到的文件中执行此操作。这就是现在的基本文件的样子。它只是一个基本的 GraphQL 节点服务器,没有任何架构:
const { createServer } = require( '@graphql-yoga/node');
async function main() {
const server = createServer({
})
await server.start()
}
main().catch(error => console.error(error))
接下来,让我们将我们的评论子模式添加到网关服务器。首先,我们导入创建评论子模式所需的方法:
const { loadSchema } = require('@graphql-tools/load');
const { GraphQLFileLoader } = require('@graphql-tools/graphql-file-loader');
const { addResolversToSchema } = require('@graphql-tools/schema');
const { stitchSchemas } = require('@graphql-tools/stitch');
由于评论模式来自不同的来源,我们需要这些loadSchema
并GraphQLFileLoader
加载它。该stitchSchemas
方法是我们将用于将我们的模式拼接在一起的方法。我们还需要导入我们的评论解析器文件及其数据源文件:
const ReviewsAPI = require("./../review/datasources/ReviewsAPI"); const reviewsResolvers = require('./../review/resolvers.js');
接下来,我们在 main 函数中创建子模式:
async function main() {
const reviewsSchema = await loadSchema('./../review/reviews.graphql', {
loaders: [new GraphQLFileLoader()]
}
)
const reviewsSchemaWithResolvers = addResolversToSchema({
schema: reviewsSchema,
resolvers: reviewsResolvers
})
const reviewsSubschema = { schema: reviewsSchemaWithResolvers };
我们现在将创建我们的网关模式,reviewsSubschema
并将其拼接到我们的主网关模式:
// build the combined schema
const gatewaySchema = stitchSchemas({
subschemas: [
reviewsSubschema
]
});
const server = createServer({
context: () => {
return {
dataSources: {
reviewsAPI: new ReviewsAPI()
}
}
},
schema: gatewaySchema,
port: 4003
})
所以我们的文件应该是这样的:
const { stitchSchemas } = require('@graphql-tools/stitch');
const { loadSchema } = require('@graphql-tools/load');
const { GraphQLFileLoader } = require('@graphql-tools/graphql-file-loader');
const { addResolversToSchema } = require('@graphql-tools/schema');
const { createServer } = require( '@graphql-yoga/node');
const ReviewsAPI = require("./../review/datasources/ReviewsAPI");
const reviewsResolvers = require('./../review/resolvers.js');
async function main() {
const reviewsSchema = await loadSchema('./../review/reviews.graphql', {
loaders: [new GraphQLFileLoader()]
}
)
const reviewsSchemaWithResolvers = addResolversToSchema({
schema: reviewsSchema,
resolvers: reviewsResolvers
})
const reviewsSubschema = { schema: reviewsSchemaWithResolvers };
// build the combined schema
const gatewaySchema = stitchSchemas({
subschemas: [
reviewsSubschema
]
});
const server = createServer({
context: () => {
return {
dataSources: {
reviewsAPI: new ReviewsAPI()
}
}
},
schema: gatewaySchema,
port: 4003
})
await server.start()
}
main().catch(error => console.error(error))
让我们启动这个服务器npm start
并尝试查询一些评论字段。单击服务器的链接并运行以下查询:
query {
reviews {
bookIsbn
comment
rating
}
}
您应该会看到带有请求字段的评论列表。
现在我们已经看到了如何在不同的模块中拼接模式。但如前所述,情况并非总是如此。大多数时候,我们必须拼接远程 GraphQL 模式。因此,我们将使用本书的子模式来展示我们如何拼接远程 GraphQL 模式。
让我们为子模式启动 GraphQL 服务器book
。该index.js
文件已经包含启动服务器的代码:
cd ../book
npm install
npm start
服务器应该在http://0.0.0.0:4002/graphql
.
要拼接远程模式,我们需要一个不可执行的模式和一个执行器。
架构可以通过自省获得,也可以作为平面 SDL 字符串从服务器或 repo 获得。在我们的例子中,我们将使用自省。Introspection 使您能够查询 GraphQL 服务器以获取有关其架构的信息。因此,通过自省,您可以了解类型、字段、查询和突变。但请注意,并非所有模式都支持自省。在这种情况下,您可以回退到使用平面 SDL。
executor 是一个简单的通用方法,它执行对远程模式的请求。
让我们为运行手册 GraphQL 服务器执行此操作。我们将回到index.js
网关目录中的文件。
让我们导入必要的依赖项:
const { introspectSchema } = require('@graphql-tools/wrap');
const { fetch } = require('cross-undici-fetch')
const { print } = require('graphql')
接下来,我们将为 books 模式添加执行器:
async function remoteExecutor({ document, variables }) {
const query = print(document)
const fetchResult = await fetch('http://0.0.0.0:4002/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query, variables })
})
return fetchResult.json()
}
GraphQL 端点在这里是硬编码的。但是,如果您要将其用于多个远程模式,您将希望使执行程序更通用。
最后,让我们构建我们的模式并将其添加到网关模式中:
const booksSubschema = {
schema: await introspectSchema(remoteExecutor),
executor: remoteExecutor,
};
const gatewaySchema = stitchSchemas({
subschemas: [booksSubschema, reviewsSubschema],
});
在另一个终端中,如果网关服务器停止,则启动它,并使用提供的服务器链接查询以下内容:
query{
reviews {
bookIsbn
comment
rating
}
books {
isbn
title
}
}
你应该得到评论和书籍。
伟大的!我们已经看到了如何将模式缝合到网关上。现在,让我们考虑如何合并在多个模式中定义的类型。
在拼接模式中,一个类型通常具有由多个服务提供的字段。在这种情况下,网关使用拼接模式配置来了解哪个服务解析特定字段。我们将使用一个例子来解释它是如何工作的。
让我们扩展Review
类型以包含有关Book
. 因此,reviews.graphql
在评论服务中找到的文件中,我们将book
字段添加到评论并定义Book
类型:
type Review {
id: Int!
bookIsbn: String!
rating: Int!
comment: String
book: Book!
}
type Book {
isbn: String
}
这是一种单向类型关系,这意味着评论服务不为该Book
类型提供任何唯一字段。所以在这种情况下,我们只需要向子模式添加一个合并配置,Book
因为它提供了该Book
类型的所有唯一字段。我们需要做的就是确保正确提供isbn
解析类型所需的 keyfield 。Book
我们将通过添加一个返回isbn
书籍的解析器来做到这一点。
在resolvers.js
评论服务的文件中,我们为该book
字段添加解析器:
const resolvers = {
Query: {
reviews(_, __, { dataSources }) {
return dataSources.reviewsAPI.getAllReviews();
},
reviewsForBook(_, { isbn }, { dataSources }) {
const reviews = dataSources.reviewsAPI.getReviewsForBook(isbn);
return { isbn, reviews };
},
},
Review: {
book: (review) => {
return { isbn: review.bookIsbn };
},
},
};
module.exports = resolvers;
接下来,我们需要在网关中为 book 子模式添加一个合并配置。这是必要的,因为我们Book
在多个模式中定义了类型。更新booksSubschema
如下:
const booksSubschema = {
schema: await introspectSchema(remoteExecutor),
executor: remoteExecutor,
merge: {
Book: {
selectionSet: "{ isbn }",
fieldName: "book",
args: ({ isbn }) => ({ isbn }),
},
},
};
这就是我们需要为这种单向类型合并做的所有事情;我们不需要将merge
配置添加到Reviews
子模式中,因为它不提供任何唯一字段。如果您对配置所需的属性感到困惑,请merge
稍等——稍后将对其进行解释。
如果您运行以下查询:
{
reviews {
id
rating
comment
book {
author
}
}
}
你应该得到:
{
"data": {
"reviews": [
{
"id": 1,
"rating": 4,
"comment": "A great introduction to Javascript",
"book": {
"author": "Marijn Haverbeke"
}
},
如果想详细了解网关是如何解析这些字段的,可以参考合并流文档。
那是类型合并的一个简单示例。但是,在许多情况下,唯一字段由多个服务提供。例如,我们可能希望能够获得特定书籍的所有评论,评论服务将负责解析该字段。在这种情况下,我们需要向网关服务添加合并配置,以使其能够解析这些字段。让我们这样做。
首先,我们将reviews
字段添加到中Book
定义的类型reviews.graphql
:
type Book {
isbn: String
reviews: [Review]
}
我们还将添加一个接受 ISBN 并返回Book
类型的查询。我们将在合并配置中使用它作为解析该类型添加的字段所需的字段名称Book
:
type Query {
reviews: [Review!]!
reviewsForBook(isbn: String): Book
}
接下来,让我们添加它的解析器:
const resolvers = {
Query: {
reviews(_, __, { dataSources }) {
return dataSources.reviewsAPI.getAllReviews();
},
reviewsForBook(_, { isbn }, { dataSources }) {
const reviews = dataSources.reviewsAPI.getReviewsForBook(isbn);
return { isbn, reviews };
},
},
接下来,我们将合并配置添加到网关服务。所以在index.js
网关目录下的文件中,我们将合并配置添加到reviewsSubschema
定义中:
const reviewsSubschema = {
schema: reviewsSchemaWithResolvers,
merge: {
Book: {
selectionSet: "{ isbn }",
fieldName: "reviewsForBook",
args: ({ isbn }) => ({ isbn }),
}
}
};
在合并配置中,我们指定该Book
类型的字段将由reviewsForBook
这里fieldName
定义的 解析。Book
这是用于解析子模式中定义的字段的顶级查询Reviews
。
selectionSet
表示fields
需要从Book
对象中选择 以获取 所需的参数reviewsForBook
。
args
将 转换selectionSet
为 使用的参数reviewsForBook
。如果我们想在selectionSet
传递给 之前对 进行任何转换,这很有用fieldName
。
现在,让我们用这个查询来获取一本书的评论:
{
book(isbn: "9781491943533") {
isbn
author
reviews {
comment
rating
}
}
}
你应该得到这个:
{
"data": {
"book": {
"isbn": "9781491943533",
"author": "Nicolás Bevacqua",
"reviews": [
{
"comment": "Dive into ES6 and the Future of JavaScript",
"rating": 5
}
]
}
}
}
在本教程中,我们讨论了模式拼接是什么,为什么需要模式拼接,并使用一个实际示例来了解如何拼接来自不同模块的模式和在不同服务器中运行的远程模式。我们还看到了如何合并多个子模式中定义的类型。有关类型合并的更详细说明,您可以参考它的文档。
我们可以看到模式拼接对于由较小服务组成的大型系统非常有用。它还可以帮助团队独立于其他团队中的其他开发人员来维护他们的模式。
组合多个子模式的另一种流行方式是 Apollo Federation。您可以阅读本文以了解它与模式拼接有何不同。
来源:https ://blog.logrocket.com/understanding-schema-stitching-graphql/
1651813200
Why use this package over the other available Elm GraphQL packages? This is the only one that generates type-safe code for your entire schema. Check out this blog post, Type-Safe & Composable GraphQL in Elm, to learn more about the motivation for this library. (It's also the only type-safe library with Elm 0.18 or 0.19 support, see this discourse thread).
I built this package because I wanted to have something that:
See an example in action on Ellie. See more end-to-end example code in the examples/
folder.
dillonkearns/elm-graphql
is an Elm package and accompanying command-line code generator that creates type-safe Elm code for your GraphQL endpoint. You don't write any decoders for your API with dillonkearns/elm-graphql
, instead you simply select which fields you would like, similar to a standard GraphQL query but in Elm. For example, this GraphQL query
query {
human(id: "1001") {
name
homePlanet
}
}
would look like this in dillonkearns/elm-graphql
(the code in this example that is prefixed with StarWars
is auto-generated)
import Graphql.Operation exposing (RootQuery)
import Graphql.SelectionSet as SelectionSet exposing (SelectionSet)
import StarWars.Object
import StarWars.Object.Human as Human
import StarWars.Query as Query
import StarWars.Scalar exposing (Id(..))
query : SelectionSet (Maybe HumanData) RootQuery
query =
Query.human { id = Id "1001" } humanSelection
type alias HumanData =
{ name : String
, homePlanet : Maybe String
}
humanSelection : SelectionSet HumanData StarWars.Object.Human
humanSelection =
SelectionSet.map2 HumanData
Human.name
Human.homePlanet
GraphQL and Elm are a perfect match because GraphQL is used to enforce the types that your API takes as inputs and outputs, much like Elm's type system does within Elm. elm-graphql
simply bridges this gap by making your Elm code aware of your GraphQL server's schema. If you are new to GraphQL, graphql.org/learn/ is an excellent way to learn the basics.
After following the installation instructions to install the @dillonkearns/elm-graphql
NPM package and the proper Elm packages (see the Setup section for details). Once you've installed everything, running the elm-graphql
code generation tool is as simple as this:
npx elm-graphql https://elm-graphql.herokuapp.com --base StarWars --output examples/src
If headers are required, such as a Bearer Token, the --header
flag can be supplied.
npx elm-graphql https://elm-graphql.herokuapp.com --base StarWars --output examples/src --header 'headerKey: header value'
There is a thorough tutorial in the SelectionSet
docs. SelectionSet
s are the core concept in this library, so I recommend reading through the whole page (it's not very long!).
The examples/
folder is another great place to start.
If you want to learn more GraphQL basics, this is a great tutorial, and a short read: graphql.org/learn/
My Elm Conf 2018 talk goes into the philosophy behind dillonkearns/elm-graphql
(Skip to 13:06 to go straight to the dillonkearns/elm-graphql
demo).
elm-graphql
using the Scalar Codecs feature. If you're wondering why code is generated a certain way, you're likely to find an answer in the Frequently Asked Questions (FAQ).
There's a very helpful group of people in the #graphql channel in the Elm Slack. Don't hesitate to ask any questions about getting started, best practices, or just general GraphQL in there!
dillonkearns/elm-graphql
generates Elm code that allows you to build up type-safe GraphQL requests. Here are the steps to setup dillonkearns/elm-graphql
.
Add the dillonkearns/elm-graphql
elm package as a dependency in your elm.json
. You will also need to make sure that elm/json
is a dependency of your project since the generated code has lots of JSON decoders in it.
elm install dillonkearns/elm-graphql
elm install elm/json
Install the @dillonkearns/elm-graphql
command line tool through npm. This is what you will use to generate Elm code for your API. It is recommended that you save the @dillonkearns/elm-graphql
command line tool as a dev dependency so that everyone on your project is using the same version.
npm install --save-dev @dillonkearns/elm-graphql
# you can now run it locally using `npx elm-graphql`,
# or by calling it through an npm script as in this project's package.json
Run the @dillonkearns/elm-graphql
command line tool installed above to generate your code. If you used the --save-dev
method above, you can simply create a script in your package.json like the following:
{
"name": "star-wars-elm-graphql-project",
"version": "1.0.0",
"scripts": {
"api": "elm-graphql https://elm-graphql.herokuapp.com/api --base StarWars"
}
With the above in your package.json
, running npm run api
will generate dillonkearns/elm-graphql
code for you to call in ./src/StarWars/
. You can now use the generated code as in this Ellie example or in the examples
folder.
You can do real-time APIs using GraphQL Subscriptions and dillonkearns/elm-graphql
. Just wire in the framework-specific JavaScript code for opening the WebSocket connection through a port. Here's a live demo and its source code. The demo server is running Elixir/Absinthe.
Thank you Mario Martinez (martimatix) for all your feedback, the elm-format PR, and for the incredible logo design!
Thank you Mike Stock (mikeastock) for setting up Travis CI!
Thanks for the reserved words pull request @madsflensted!
A huge thanks to @xtian for doing the vast majority of the 0.19 upgrade work! :tada:
Thank you Josh Adams (@knewter) for the code example for Subscriptions with Elixir/Absinthe wired up through Elm ports!
Thank you Romario for adding OptionalArgument.map
!
Thank you Aaron White for your pull request to improve the performance and stability of the elm-format
step! 🎉
All core features are supported. That is, you can build any query or mutation with your dillonkearns/elm-graphql
-generated code, and it is guaranteed to be valid according to your server's schema.
dillonkearns/elm-graphql
will generate code for you to generate subscriptions and decode the responses, but it doesn't deal with the low-level details for how to send them over web sockets. To do that, you will need to use custom code or a package that knows how to communicate over websockets (or whichever protocol) to setup a subscription with your particular framework. See this discussion for why those details are not handled by this library directly.
I would love to hear feedback if you are using GraphQL Subscriptions. In particular, I'd love to see live code examples to drive any improvements to the Subscriptions design. Please ping me on Slack, drop a message in the #graphql channel, or open up a Github issue to discuss!
I would like to investigate generating helpers to make pagination simpler for Connections (based on the Relay Cursor Connections Specification). If you have ideas on this chime in on this thread.
See the full roadmap on Trello.
Author: dillonkearns
Source Code: https://github.com/dillonkearns/elm-graphql
License: View license
1622105190
One of the fastest ways to get up and running with GraphQL is to install Apollo Server as middleware on your new or existing HTTP server.
In this short post, we demonstrate how to use Apollo Server to create a GraphQL server with Express.js using the [apollo-server-express] package. At the end, we’ll discuss the tradeoffs of this approach.
#graphql #javascript #graphql.js #graphql.js tutorial
1622024357
At Apollo, we’ve been hard at work helping to showcase the amazing stories and projects that have surfaced in the past few months. We’ve organized one [GraphQL meetup] already and there’s another coming up [tomorrow].
With [all] [the] [amazing] [GraphQL] happening in conferences and meetups around the world, and the fact that there never seemed to be enough room in our meetup lineups for everyone we wanted to hear from, we decided it was time to plan a conference dedicated entirely to GraphQL.
#graphql #talk graphql #graphql summit
1651914000
Awesome list of GraphQL
If you want to contribute to this list (please do), send me a pull request.
#help-graphql
on the Reactiflux Discord server.#graphql
.graphql
.JavaScript
or TypeScript
which provides autocompletion for strongly typed queries.Frontend Framework Integrations
React
Databases & ORMs
PubSub
Author: chentsulin
Source Code: https://github.com/chentsulin/awesome-graphql
License:
1642263720
graphql-Ruby
A Ruby implementation of GraphQL.
Install from RubyGems by adding it to your Gemfile
, then bundling.
# Gemfile gem 'graphql'
$ bundle install
$ rails generate graphql:install
After this, you may need to run bundle install
again, as by default graphiql-rails is added on installation.
Or, see "Getting Started".
I also sell GraphQL::Pro which provides several features on top of the GraphQL runtime, including Pundit authorization, CanCan authorization, Pusher-based subscriptions and persisted queries. Besides that, Pro customers get email support and an opportunity to support graphql-ruby's development!
Download Details:
Author: rmosolgo
Source Code: https://github.com/rmosolgo/graphql-ruby
License: MIT License