GraphQL案例演示

栏目: 前端 · 发布时间: 7年前

内容简介：TakeShape的联合创始人Andrew Sprouse在纽约的JAMstack聚会介绍了GraphQL。什么是GraphQL？模式定义+查询语言+解析框架

TakeShape的联合创始人Andrew Sprouse在纽约的JAMstack聚会介绍了GraphQL。

什么是GraphQL？

模式定义+查询语言+解析框架

架构

提供数据的强类型描述
架构描述语言（SDL）是指定架构的推荐跨平台方式。

enum Title {
    ACTOR
    DIRECTOR
}

type Role {
    characterName: String!
    title: Title
    movie: Movie
}

type Person {
    name: String!
    photo: String
    filmography: [Role]
}

type Movie {
    title: String!
    watched: Boolean
    rating: Float
    poster: String
    actors: [Person]!
    director: Person!
    year: String
}

GraphQL Schema还指定了如何使用查询和突变与数据进行交互：

type Query {
    listMovies: [Movie]
}

type Mutation {
    addMove(title: String): [Movie]
    removeMovie(title: String): [Movie]
}

查询Langauge

查询您的数据并准确获取您需要的内容：

query {
    getToWatchList {
        watched
        movie {
            title
            year
            director
        }
    }
}

{
  <font>"data"</font><font>: {
    </font><font>"getToWatchList"</font><font>: [
      {
        </font><font>"watched"</font><font>: <b>true</b>,
        </font><font>"movie"</font><font>: {
          </font><font>"title"</font><font>: </font><font>"Top Gun"</font><font>,
          </font><font>"year"</font><font>: </font><font>"1985"</font><font>,
          </font><font>"director"</font><font>: </font><font>"Tony Scott"</font><font>
        }
      },
      {
        </font><font>"watched"</font><font>: <b>true</b>,
        </font><font>"movie"</font><font>: {
          </font><font>"title"</font><font>: </font><font>"Big Trouble in Little China"</font><font>,
          </font><font>"year"</font><font>: </font><font>"1986"</font><font>,
          </font><font>"director"</font><font>: </font><font>"John Carpenter"</font><font>
        }
      },
      {
        </font><font>"watched"</font><font>: <b>true</b>,
        </font><font>"movie"</font><font>: {
          </font><font>"title"</font><font>: </font><font>"The Princess Bride"</font><font>,
          </font><font>"year"</font><font>: </font><font>"1987"</font><font>,
          </font><font>"director"</font><font>: </font><font>"Rob Reiner"</font><font>
        }
      },
      {
        </font><font>"watched"</font><font>: false,
        </font><font>"movie"</font><font>: {
          </font><font>"title"</font><font>: </font><font>"Taxi Driver"</font><font>,
          </font><font>"year"</font><font>: </font><font>"1976"</font><font>,
          </font><font>"director"</font><font>: </font><font>"Martin Scorsese"</font><font>
        }
      }
    ]
  }
}
</font>

修改数据

mutation {
    addMovieToWatch(title: <font>"Die Hard"</font><font>) {
        watched
        movieTitle
        movie {
            title
            year
            director
        }
    }
}

{
  </font><font>"data"</font><font>: {
    </font><font>"addMovieToWatch"</font><font>: [
      {
        </font><font>"watched"</font><font>: false,
        </font><font>"movie"</font><font>: {
          </font><font>"title"</font><font>: </font><font>"Taxi Driver"</font><font>,
          </font><font>"year"</font><font>: </font><font>"1976"</font><font>,
          </font><font>"director"</font><font>: </font><font>"Martin Scorsese"</font><font>
        }
      },
      {
        </font><font>"watched"</font><font>: false,
        </font><font>"movie"</font><font>: {
          </font><font>"title"</font><font>: </font><font>"Die Hard"</font><font>,
          </font><font>"year"</font><font>: </font><font>"1988"</font><font>,
          </font><font>"director"</font><font>: </font><font>"John McTiernan"</font><font>
        }
      }
    ]
  }
}
</font>

实现框架

每个GraphQL实现都提供自己的查询解析框架
GraphQL.js是参考实现
执行查询和变异解析

架构（SDL）

type Query {
    getToWatchList: [ToWatch]
}

type Mutation {
    addMovieToWatch(title: String!): [ToWatch]
    removeMovieToWatch(title: String!): [ToWatch]
    markMovieWatched(title: String! watched: Boolean!): [ToWatch]
}

解析器

<b>const</b> resolvers = {
    Query: {
        getToWatchList: () => {
            <b>return</b> WatchList.list();
        }
    },

    Mutation: {
        addMovieToWatch(_, {title}) {
            <b>return</b> WatchList.add(title);
        },

        removeMovieToWatch(_, {title}) {
            <b>return</b> WatchList.remove(title);
        },

        markMovieWatched(_, {title, watched}) {
            <b>return</b> WatchList.markWatched(title, watched);
        }
    }
};

解析器还能够解析动态计算字段

架构（SDL）

type Move {
    title: String
    rating: Float
    poster: String
    actors: String
    director: String 
    year: String
}

type ToWatch {
    movieTitle: String!
    movie: Movie
    watched: Boolean!
}

解析器

<b>const</b> resolvers = {
    ToWatch: {
        async movie(toWatch) {
            <b>const</b> info = await fetchMovieInfo(toWatch.movieTitle);
            <b>return</b> info ? {
                title: info.Title,
                rating: info.imdbRating,
                poster: info.Poster,
                year: info.Year,
                actors: info.Actors,
                director: info.Director
            } : <b>null</b>
        }
    }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

数据结构与算法分析(C++版)(第3版)

Clifford A. Shaffer / 张铭、刘晓丹、等译 / 电子工业出版社 / 2013 / 59.00元

本书采用当前流行的面向对象的C++程序设计语言来描述数据结构和算法，因为C++语言是程序员最广泛使用的语言。因此，程序员可以把本书中的许多算法直接应用于将来的实际项目中。尽管数据结构和算法在设计本质上还是很底层的东西，并不像大型软件工程项目开发那样，对面向对象方法具有直接的依赖性，因此有人会认为并不需要采用高层次的面向对象技术来描述底层算法。但是采用C++语言能更好地体现抽象数据类型的......一起来看看《数据结构与算法分析(C++版)(第3版)》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

GraphQL案例演示

数据结构与算法分析(C++版)(第3版)

CSS 压缩/解压工具

URL 编码/解码