客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：miragejs/graphql开源软件地址(OpenSource Url)：https://github.com/miragejs/graphql开源编程语言(OpenSource Language)：JavaScript 100.0%开源软件介绍(OpenSource Introduction)：Mirage JS GraphQL
OverviewMirage lets you simulate API responses by writing route handlers. A route handler is a function that returns data to fulfill a request. Mirage GraphQL provides the ability to create a GraphQL route handler based on your GraphQL and Mirage schemas. import { createServer } from "miragejs"
import { createGraphQLHandler } from "@miragejs/graphql"
import graphQLSchema from "app/gql/schema.gql"
export function makeServer() {
return createServer({
routes() {
const graphQLHandler = createGraphQLHandler(graphQLSchema, this.schema)
this.post("/graphql", graphQLHandler)
}
})
}HighlightsMirage GraphQL tries to do a lot for you. Here are the highlights:
InstallationYou should install both # Using npm
npm install --save-dev miragejs @miragejs/graphql
# Using Yarn
yarn add --dev miragejs @miragejs/graphqlGuideThis guide assumes most of its readers are already using GraphQL in their apps and want to start using Mirage to mock out their backend. This guide will try to provide enough information to be useful but it's worth reading the Mirage guides to get a full understanding of everything Mirage can do. Table of ContentsMirage GraphQL AssumptionsThere are a couple of assumptions Mirage GraphQL makes concerning how it resolves GraphQL queries. It's important to understand these assumptions to avoid confusion based on its behavior. You Don't Need to Define Mirage ModelsIn many cases, you need to tell Mirage about the models that exist in your app but Mirage GraphQL assumes relationships between types from your GraphQL schema and creates models accordingly. You can still define Mirage models, if you'd like, and Mirage GraphQL won't try to create them on its own. Arguments from GraphQL Queries Map to Field Names of the Return TypeMirage GraphQL uses arguments to filter records from Mirage's database. This isn't very useful for testing, as you only need to seed Mirage's database with the exact records you need for a given test. It's more useful when using Mirage for development where filtering and pagination may be desired for a more realistic user experience. Miscellaneous Assumptions
Example Use CasesNotes:
Example SchemaFor these examples, imagine we have a GraphQL schema that looks like this: # app/gql/schema.gql
input PersonInput {
firstName: String
lastName: String
}
type Mutation {
createPerson(input: PersonInput!): Person
updatePerson(id: ID!, input: PersonInput!): Person
# Note: `deletePerson` can't automatically be resolved due to the Boolean
# return type. We will need to implement a resolver for this.
deletePerson(id: ID!): Boolean
}
type Person {
id: ID!
firstName: String!
lastName: String!
}
type Query {
allPeople: [Person]
person(id: ID!): Person
# Note: `people` can't automatically be resolved if the `sortBy` argument is
# supplied to the query. We will need to implement a resolver for this.
people(firstName: String, lastName: String, sortBy: String): [Person]
}and we create a Mirage server like this: // app/mirage/server.js
import { createServer } from "miragejs"
import { createGraphQLHandler } from "@miragejs/graphql"
import graphQLSchema from "app/gql/schema.gql"
export function makeServer() {
return createServer({
routes() {
const graphQLHandler = createGraphQLHandler(graphQLSchema, this.schema);
this.post("/graphql", graphQLHandler)
}
})
}Example: Find Person by IDIn this example, we can get a // app/components/person.js
import { createServer } from "app/mirage/server";
import { request } from "graphql-request"
const server = createServer();
server.create("person", { firstName: "Mikael", lastName: "Åkerfeldt" })
export default {
// ...other component stuff
personQuery: `
query Person($id: id) {
person(id: $id) {
id
firstName
lastName
}
}
`,
getPerson(id) {
return request("/graphql", this.personQuery, { id })
}
}A call to {
"data": {
"person": {
"id": "1",
"firstName": "Mikael",
"lastName": "Åkerfeldt"
}
}
}Example: Get All PeopleIn this example, we can get all the // app/components/people.js
import { createServer } from "app/mirage/server";
import { request } from "graphql-request"
const server = createServer();
server.create("person", { firstName: "Mikael", lastName: "Åkerfeldt" })
server.create("person", { firstName: "Per", lastName: "Nilsson" })
server.create("person", { firstName: "Tomas", lastName: "Haake" })
export default {
// ...other component stuff
peopleQuery: `
query People {
people {
id
firstName
lastName
}
}
`,
getPeople() {
return request("/graphql", this.peopleQuery)
}
}A call to {
"data": {
"people": [
{
"id": "1",
"firstName": "Mikael",
"lastName": "Åkerfeldt"
},
{
"id": "2",
"firstName": "Per",
"lastName": "Nilsson"
},
{
"id": "3",
"firstName": "Tomas",
"lastName": "Haake"
}
]
}
}Example: Creating and Updating a PersonIn this example, we can create or update a // app/components/people.js
import { createServer } from "app/mirage/server";
import { request } from "graphql-request"
const server = createServer();
export default {
// ...other component stuff
createPersonMutation: `
mutation CreatePerson($input: PersonInput!) {
createPerson(input: $input) {
id
firstName
lastName
}
}
`,
updatePersonMutation: `
mutation UpdatePerson($id: ID!, $input: PersonInput!) {
updatePerson(id: $id, input: $input) {
id
firstName
lastName
}
}
`,
createPerson(input) {
return request("/graphql", this.createPersonMutation, { input })
},
updatePerson(id, input) {
return request("/graphql", this.updatePersonMutation, { id, input })
}
}A call to {
"data": {
"createPerson": {
"id": "1",
"firstName": "Ola",
"lastName": "Englund"
}
}
}If you then wanted to update that person, you could call {
"data": {
"updatePerson": {
"id": "1",
"firstName": "Ola",
"lastName": "Strandberg"
}
}
}Automatic Mutation ConventionsMirage GraphQL will automatically resolve these mutations per these conventions:
Any other combination of arguments for a mutation requires a resolver. This can be seen in a later example. Example: Filtering PeopleIn this example, we can get filter Part 1: Filtering by Last NameIn the following case, Mirage GraphQL can automatically filter the records from Mirage's database because the // app/components/people.js
import { createServer } from "app/mirage/server";
import { request } from "graphql-request"
const server = createServer();
server.create("person", { firstName: "Mikael", lastName: "Åkerfeldt" })
server.create("person", { firstName: "Per", lastName: "Nilsson" })
server.create("person", { firstName: "Tomas", lastName: "Haake" })
export default {
// ...other component stuff
peopleQuery: `
query People($firstName: String, $lastName: String, $sortBy: String) {
people(firstName: $firstName, lastName: $lastName, sortBy: $sortBy) {
id
firstName
lastName
}
}
`,
getPeopleByLastName(lastName) {
return request("/graphql", this.peopleQuery, { lastName })
}
}A call to {
"data": {
"people": [
{
"id": "3",
"firstName": "Tomas",
"lastName": "Haake"
}
]
}
}Part 2: SortingIn the following case, Mirage GraphQL can't automatically resolve the query because the In the Mirage server setup: // app/mirage/server.js
import { createServer } from "miragejs"
import graphQLSchema from "app/gql/schema.gql"
import {
createGraphQLHandler,
mirageGraphQLFieldResolver
} from "@miragejs/graphql"
export function makeServer() {
return createServer({
routes() {
const graphQLHandler = createGraphQLHandler(graphQLSchema, this.schema, {
resolvers: {
Query: {
people(obj, args, context, info) {
const { sortBy } = args
delete args.sortBy
const records =
mirageGraphQLFieldResolver(obj, args, context, info)
return records.sort((a, b) => a[sortBy].localeCompare(b[sortBy]))
}
}
}
})
this.post("/graphql", graphQLHandler)
}
})
}Note: We can pass as many resolvers into Having added a resolver to handle the // app/components/people.js
import { createServer } from "app/mirage/server";
import { request } from "graphql-request"
const server = createServer();
server.create("person", { firstName: "Mikael", lastName: "Åkerfeldt" })
server.create("person", { firstName: "Per", lastName: "Nilsson" })
server.create("person", { firstName: "Tomas", lastName: "Haake" })
export default {
// ...other component stuff
peopleQuery: `
query People($firstName: String, $lastName: String, $sortBy: String) {
people(firstName: $firstName, lastName: $lastName, sortBy: $sortBy) {
id
firstName
lastName
}
}
`,
getSortedPeopleBy(sortBy) {
return request("/graphql", this.peopleQuery, { sortBy })
}
}A call to {
"data": {
"people": [
{
"id": "1",
"firstName": "Mikael",
"lastName": "Åkerfeldt"
},
{
"id": "3",
"firstName": "Tomas",
"lastName": "Haake"
},
{
"id": "2",
"firstName": "Per",
"lastName": "Nilsson"
}
]
}
}Example: Deleting a PersonIf you read the section on automatically resolving mutations, you'll know that Mirage GraphQL can automatically handle conventional mutations that delete records. However, in our example schema, the In this case, we need to implement a resolver but just like in the example of sorting people, we can leverage Mirage GraphQL's default behavior. In the Mirage server setup: 全部评论
专题导读
上一篇：eclipse/microprofile-graphql: microprofile-graphql发布时间：2022-06-13下一篇：graphql/codemirror-graphql: GraphQL mode and helpers for CodeMirror.发布时间：2022-06-13热门推荐
热门话题
 阅读排行榜
|
请发表评论