如何从前端透视图我画图

Hey, Did you dreamed one day as a Front end engineer to write your API response with yourself without a long conversation with the Back end engineer to agree on every API response schema?

^ h安永，你梦想着有一天作为一个前端工程师编写与自己的API响应，而不与后端工程师对每个API响应架构同意长谈？

FE: could you please retrieve the ID for me here? 👀BE: oh, you need that, okay I will 👌 — FE: did you change the API name? I got a not found on my request 🥴BE: Oh, my bad yes it’s changed yesterday 🤦

菲：您能在这里找我的身份证吗？ 👀BE：哦，您需要，好吧，我会👌FE — FE：您更改了API名称吗？ 我的要求未找到🥴BE：哦，我的错，是的，昨天已更改🤦

No more discussions like that with GraphQl 🎇

使用GraphQl不再有类似的讨论🎇

什么是GraphQl？ (What is GraphQl?)

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data.

GraphQL是API的查询语言，它是服务器端运行时，用于通过使用为数据定义的类型系统执行查询。

它是如何工作的？ (How does it work?)

Once a GraphQL service is running (typically at a URL on a web service), it can receive GraphQL queries to validate and execute. A received query is first checked to ensure it only refers to the types and fields defined, then runs the provided functions to produce a result.

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

how GraphQl works — by (Dina Khaled)

GraphQl的工作原理—作者(Dina Khaled)

查询和变异 (Queries and Mutations)

Queries are for getting data from GraphQl server like [get] method in Rest APIs

查询用于从GraphQl服务器获取数据，例如Rest API中的[get]方法

Mutations are for adding/modifying data to GraphQl server like [post — put — delete] methods in Rest APIs

突变用于向GraphQl服务器添加/修改数据，如Rest API中的[post – put – delete]方法

如何查询？ (How to query?)

领域 (Fields)

GraphQL is about asking for specific fields on objects,you could imagine it like a key in an object in javascript.

GraphQL是关于请求对象上的特定字段的，您可以想象它像javascript中对象中的键一样。

// [id - name - age] all of those called fields
query getEmployees {
  employees {
    id          
    name
    age
  }
}

争论 (Arguments)

This is the ability to pass arguments to fields, which power GraphQl fetching functionality,you could imagine it like passing arguments to functions in javascript.

这是将参数传递给字段的能力，这可以增强GraphQl的获取功能，您可以想象它就像将参数传递给javascript中的函数一样。

// The argument is id: "2" to fetch single employee that match the given id
query getEmployees {
  employees(id: "2") {
    id          
    name
    age
  }
}

every field and a nested object can get its own set of arguments, making GraphQL a complete replacement for making multiple API fetches.

每个字段和一个嵌套对象都可以获取自己的参数集，从而使GraphQL可以完全替代进行多个API提取。

别名 (Aliases)

You can’t directly query for the same field with different arguments. That’s why you need [Aliases] they let you rename the result of a field to anything you want.

您不能直接使用不同的参数查询同一字段。 这就是为什么您需要[别名]以便您将字段的结果重命名为所需的任何内容的原因。

query getEmployees {
  NewEmployee: employees(type: NEW) {
    name
  }
  OldEmployee: employees(type: OLD) {
    name
  }
}

碎片 (Fragments)

If you have two sections in your app page that have the same fields but with different types, here GraphQl introduces fragments it’s reusable units which let you construct sets of fields, and then include them in queries where you need to.

如果您的应用程序页面中有两个具有相同字段但具有不同类型的部分，则GraphQl会引入片段，它是可重用的单元，可让您构造字段集，然后将它们包括在需要的查询中。

query getEmployees {
  leftEmployees: employees(type: left) {
    ...employeesFields
  }
  rightEmployees: employees(type: right) {
    ...employeesFields
  }
}fragment employeesFields on employee {
  name
  friends {
    name
  }
}

It is possible for fragments to access variables declared in the query or mutation.

片段可能会访问查询或变异中声明的变量。

variables are defined like that ($type: new)you could also give it a default value ($type: new = ‘I’m a defualt value’)

变量的定义是这样的($ type：new)您也可以给它一个默认值($ type：new ='I'm defualt value')

query getEmployees($first: Int = 3) {
  leftEmployees: employees(type: left) {
    ...employeesFields
  }
  rightEmployees: employees(type: right) {
    ...employeesFields
  }
}fragment employeesFields on employee{
  name
  friendsConnection(first: $first) {
    totalCount
    edges {
      node {
        name
      }
    }
  }
}

内联片段 (Inline Fragments)

If you are querying a field that returns an interface or a union type — we will talk about these types in the next part of that series — , you will need to use inline fragments to access data on the underlying concrete type.

如果要查询返回接口或联合类型的字段(我们将在该系列的下一部分中讨论这些类型)，则需要使用内联片段来访问基础具体类型上的数据。

query getEmployees($type: Type!) {
  employees(employeeType: $type!) {
    ... on OldEmployee {
      leftYear
    }
    ... on FullData {
      height
    }
  }
}

GraphQL allows you to request __typename, a meta field, at any point in a query to get the name of the object type at that point [__typename: “oldEmployee"].

GraphQL允许您在查询中的任何时候请求__typename (一个元字段)，以获取此时该对象类型的名称[__typename: “oldEmployee"] 。

指令 (Directives)

If we can imagine a UI component that has a summarized and detailed view, where one includes more fields than the other, so we want here to retrieve data conditionally.

如果我们可以想象一个UI组件具有一个概述和详细的视图，其中一个组件包含的字段比另一个组件多，那么我们希望在此有条件地检索数据。

query getEmployees($withFriends: Boolean!) {
  employees {
    name
    friends @include(if: $withFriends) {
      name
    }
  }
}

So here if I send withFriends: true when I query it will return the friends array otherwise it will not return it.

因此，如果我发送withFriends：true，则在查询时将返回friends数组，否则将不返回它。

The core GraphQL specification includes exactly two directives:

核心GraphQL规范恰好包含两个指令：

• @include(if: Boolean) Only include this field in the result if the argument is true.

  @include(if: Boolean)如果参数为true则仅在结果中包括此字段。

• @skip(if: Boolean) Skip this field if the argument is true.

  @skip(if: Boolean)如果参数为true则跳过此字段。

变异 (Mutations)

Most discussions of GraphQL focus on data fetching, but any complete data platform needs a way to modify server-side data as well.

GraphQL的大多数讨论都集中在数据获取上，但是任何完整的数据平台都需要一种修改服务器端数据的方法。

Just like in queries, if the mutation field returns an object type, you can ask for nested fields. This can be useful for fetching the new state of an object after an update.

就像查询中一样，如果突变字段返回对象类型，则可以请求嵌套字段。 这对于在更新后获取对象的新状态很有用。

mutation addNewEmployee($name: name!, $age: age!) {
  createEmployee(name: $ep, age: $age) {
    name
    age
  }
}// The send data will be something like 
const empolyeeData = {
  "name": "Dina",
  "age": 26
}

结论 (Conclusion)

When we talk about GraphQL, we’re either referring to the language itself or its rich ecosystem of tools. At its core, GraphQL is a typed query language that allows you to describe your data requirements in a declarative way.

当我们谈论GraphQL时，我们指的是语言本身或其丰富的工具生态系统。 GraphQL的核心是一种类型化查询语言，它使您能够以声明方式描述数据要求。

we talked about how to query and mutate the data, in part two we will go deep with GraphQl schemas and types …

我们讨论了如何查询和变异数据，在第二部分中，我们将深入探讨GraphQl模式和类型……

我们有一系列有关GraphQl的文章： (We have a series of articles about GraphQl:)

• How to GraphQl, from Frontend perspective[Part I]

  从前端角度看如何绘制GraphQl [第一部分]

• How to GraphQl, from Frontend perspective[Part II] …In progress

  从前端角度看如何绘制GraphQl [第二部分] …进行中

Thank you for reading, if you have any comments let me know, please :)

谢谢您的阅读，如果您有任何意见，请告诉我：)

That’s all for today see you soon in my next story …👋

今天就这些，我的下一个故事很快就会见到您……👋

翻译自: https://medium.com/@dina.elghndour/how-to-graphql-from-frontend-perspective-part-i-3e4a5c2e4ad