GraphQL案例演示

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

内容简介：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>
        }
    }
};

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

查看所有标签

猜你喜欢:

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

码农书籍

Algorithms + Data Structures = Programs

Niklaus Wirth / Prentice Hall / 1975-11-11 / GBP 84.95

It might seem completely dated with all its examples written in the now outmoded Pascal programming language (well, unless you are one of those Delphi zealot trying to resist to the Java/.NET dominanc......一起来看看《Algorithms + Data Structures = Programs》这本书的介绍吧!

码农工具

在线进制转换器

各进制数互转换器

SHA 加密

SHA 加密工具

HSV CMYK 转换工具

HSV CMYK互换工具