18 |
38 | );
39 | }
40 |
41 | type ReviewType = { rating: number; id: string };
42 |
43 | function Reviews({ reviews }: { reviews: Array
19 | 
23 |
24 |
25 |
37 |
26 |
33 | 27 | 28 | 29 | {product.title} 30 | 31 |
32 |34 | {children} 35 |
36 |
6 | 
*/}
9 |
10 | {" "}
11 |
12 |
15 | GraphQL Testing Library
7 | 8 | {/* */}
9 |
10 | {" "}
11 |
12 | Generate Mock Service Worker handlers for your GraphQL APIs.
13 | 14 |16 | 17 | **GraphQL Testing Library** provides utilities that make it easy to generate [Mock Service Worker](https://mswjs.io/) handlers for any GraphQL API. 18 | 19 | MSW is the [Testing Library-recommended](https://testing-library.com/docs/react-testing-library/example-intro/#full-example) way to declaratively mock API communication in your tests without stubbing `window.fetch`. 20 | 21 | This library currently supports incremental delivery features `@defer` and `@stream` out of the box, with plans to support subscriptions over multipart HTTP as well as other transports such as WebSockets, [currently in beta in MSW](https://github.com/mswjs/msw/discussions/2010). 22 | 23 | > This project is not affiliated with the ["Testing Library"](https://github.com/testing-library) ecosystem that inspired it. We're just fans :) 24 | 25 | ## Installation 26 | 27 | This library has `peerDependencies` listings for `msw` at `^2.0.0` and `graphql` at `^15.0.0 || ^16.0.0`. Install them along with this library using your preferred package manager: 28 | 29 | ``` 30 | npm install --save-dev @apollo/graphql-testing-library msw graphql 31 | pnpm add --save-dev @apollo/graphql-testing-library msw graphql 32 | yarn add --dev @apollo/graphql-testing-library msw graphql 33 | bun add --dev @apollo/graphql-testing-library msw graphql 34 | ``` 35 | 36 | ## Usage 37 | 38 | ### `createHandler` 39 | 40 | ```typescript 41 | import { createHandler } from "@apollo/graphql-testing-library"; 42 | 43 | // We suggest using @graphql-tools/mock and @graphql-tools/schema 44 | // to create a schema with mock resolvers. 45 | // See https://the-guild.dev/graphql/tools/docs/mocking for more info. 46 | import { addMocksToSchema } from "@graphql-tools/mock"; 47 | import { makeExecutableSchema } from "@graphql-tools/schema"; 48 | import typeDefs from "./schema.graphql"; 49 | 50 | // Create an executable schema 51 | const schema = makeExecutableSchema({ typeDefs }); 52 | 53 | // Add mock resolvers 54 | const schemaWithMocks = addMocksToSchema({ 55 | schema, 56 | resolvers: { 57 | Query: { 58 | products: () => 59 | Array.from({ length: 5 }, (_element, id) => ({ 60 | id: `product-${id}`, 61 | })), 62 | }, 63 | }, 64 | }); 65 | 66 | // `createHandler` returns an object with a `handler` and `replaceSchema` 67 | // function: `handler` is a MSW handler that will intercept all GraphQL 68 | // operations, and `replaceSchema` allows you to replace the mock schema 69 | // the `handler` use to resolve requests against. 70 | const { handler, replaceSchema } = createHandler(schemaWithMocks, { 71 | // It accepts a config object as the second argument where you can specify a 72 | // delay duration, which uses MSW's delay API: 73 | // https://mswjs.io/docs/api/delay 74 | // Default: "real" (100-400ms in browsers, 20ms in Node-like processes) 75 | delay: number | "infinite" | "real", 76 | }); 77 | ``` 78 | -------------------------------------------------------------------------------- /.storybook/stories/components/relay/relay-environment.ts: -------------------------------------------------------------------------------- 1 | import { serializeFetchParameter } from "@apollo/client"; 2 | import type { CacheConfig, RequestParameters } from "relay-runtime"; 3 | import { 4 | Environment, 5 | Network, 6 | Observable, 7 | RecordSource, 8 | Store, 9 | QueryResponseCache, 10 | } from "relay-runtime"; 11 | import type { Variables } from "relay-runtime"; 12 | import { maybe } from "@apollo/client/utilities"; 13 | import { 14 | handleError, 15 | readMultipartBody, 16 | } from "@apollo/client/link/http/parseAndCheckHttpResponse"; 17 | 18 | const uri = "https://main--hack-the-e-commerce.apollographos.net/graphql"; 19 | 20 | const oneMinute = 60 * 1000; 21 | const cache = new QueryResponseCache({ size: 250, ttl: oneMinute }); 22 | 23 | const backupFetch = maybe(() => fetch); 24 | 25 | function fetchQuery( 26 | operation: RequestParameters, 27 | variables: Variables, 28 | cacheConfig: CacheConfig, 29 | ) { 30 | const queryID = operation.text; 31 | const isMutation = operation.operationKind === "mutation"; 32 | const isQuery = operation.operationKind === "query"; 33 | const forceFetch = cacheConfig && cacheConfig.force; 34 | 35 | // Try to get data from cache on queries 36 | const fromCache = cache.get(queryID, variables); 37 | if (isQuery && fromCache !== null && !forceFetch) { 38 | return fromCache; 39 | } 40 | 41 | const body = { 42 | operationName: operation.name, 43 | variables, 44 | query: operation.text || "", 45 | }; 46 | 47 | const options: { 48 | method: string; 49 | headers: Record
2 |
3 | 
4 |
5 |
6 | 
7 |
8 |
9 |
16 |
4 |
5 |
6 |
7 |
8 |
9 | GraphQL Testing Library
10 | 11 |Generate Mock Service Worker handlers for your GraphQL APIs.
12 | 13 | [](https://badge.fury.io/js/%40apollo%2Fgraphql-testing-library)   14 | 15 |17 | 18 | **GraphQL Testing Library** provides utilities that make it easy to generate [Mock Service Worker](https://mswjs.io/) handlers for any GraphQL API. 19 | 20 | MSW is the [Testing Library-recommended](https://testing-library.com/docs/react-testing-library/example-intro/#full-example) way to declaratively mock API communication in your tests without stubbing `window.fetch`. 21 | 22 | This library currently supports incremental delivery features `@defer` and `@stream` out of the box, with plans to support subscriptions over multipart HTTP as well as other transports such as WebSockets, [currently in beta in MSW](https://github.com/mswjs/msw/discussions/2010). 23 | 24 | > This project is not affiliated with the ["Testing Library"](https://github.com/testing-library) ecosystem that inspired it. We're just fans :) 25 | 26 | ## Installation 27 | 28 | This library has `peerDependencies` listings for `msw` at `^2.0.0` and `graphql` at `^15.0.0 || ^16.0.0`. Install them along with this library using your preferred package manager: 29 | 30 | ``` 31 | npm install --save-dev @apollo/graphql-testing-library msw graphql 32 | pnpm add --save-dev @apollo/graphql-testing-library msw graphql 33 | yarn add --dev @apollo/graphql-testing-library msw graphql 34 | bun add --dev @apollo/graphql-testing-library msw graphql 35 | ``` 36 | 37 | ## Usage 38 | 39 | ### `createHandler` 40 | 41 | ```typescript 42 | import { createHandler } from "@apollo/graphql-testing-library"; 43 | 44 | // We suggest using @graphql-tools/mock and @graphql-tools/schema 45 | // to create a schema with mock resolvers. 46 | // See https://the-guild.dev/graphql/tools/docs/mocking for more info. 47 | import { addMocksToSchema } from "@graphql-tools/mock"; 48 | import { makeExecutableSchema } from "@graphql-tools/schema"; 49 | import typeDefs from "./schema.graphql"; 50 | 51 | // Create an executable schema 52 | const schema = makeExecutableSchema({ typeDefs }); 53 | 54 | // Add mock resolvers 55 | const schemaWithMocks = addMocksToSchema({ 56 | schema, 57 | resolvers: { 58 | Query: { 59 | products: () => 60 | Array.from({ length: 5 }, (_element, id) => ({ 61 | id: `product-${id}`, 62 | })), 63 | }, 64 | }, 65 | }); 66 | 67 | // `createHandler` returns an object with a `handler` and `replaceSchema` 68 | // function: `handler` is a MSW handler that will intercept all GraphQL 69 | // operations, and `replaceSchema` allows you to replace the mock schema 70 | // the `handler` use to resolve requests against. 71 | const { handler, replaceSchema } = createHandler(schemaWithMocks, { 72 | // It accepts a config object as the second argument where you can specify a 73 | // delay duration, which uses MSW's delay API: 74 | // https://mswjs.io/docs/api/delay 75 | // Default: "real" (100-400ms in browsers, 20ms in Node-like processes) 76 | delay: number | "infinite" | "real", 77 | }); 78 | ``` 79 | -------------------------------------------------------------------------------- /.storybook/stories/components/relay/__generated__/RelayComponentAppQuery.graphql.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @generated SignedSource<<12bf2f218fc1496a2703731552a99cb9>> 3 | * @lightSyntaxTransform 4 | * @nogrep 5 | */ 6 | 7 | /* tslint:disable */ 8 | /* eslint-disable */ 9 | // @ts-nocheck 10 | 11 | import { ConcreteRequest, Query } from 'relay-runtime'; 12 | import { FragmentRefs } from "relay-runtime"; 13 | export type RelayComponentAppQuery$variables = Record
126 |
141 | );
142 | }
143 |
144 | function TeamSelect({
145 | currentTeam,
146 | teams,
147 | }: {
148 | currentTeam: string;
149 | teams: Array<{ name: string; id: string }>;
150 | }) {
151 | const [setCurrentTeam] = useMutation(APP_MUTATION, {
152 | update(cache, { data: { setCurrentTeam } }) {
153 | cache.modify({
154 | fields: {
155 | team(_existingRef, { toReference }) {
156 | return toReference({
157 | __typename: "Team",
158 | id: setCurrentTeam.id,
159 | });
160 | },
161 | },
162 | });
163 | },
164 | });
165 |
166 | return (
167 |
127 |
129 |
130 | Welcome to the W 🏀
128 |
136 | WNBA stats central
137 |
138 |
168 |
171 |
191 |
192 | );
193 | }
194 |
195 | function Team({ team }: { team: string }) {
196 | const { data } = useFragment({
197 | fragment: TEAM_FRAGMENT,
198 | from: {
199 | __typename: "Team",
200 | id: team,
201 | },
202 | });
203 |
204 | return (
205 |
206 |
216 | );
217 | }
218 |
--------------------------------------------------------------------------------
/src/requestHandler.ts:
--------------------------------------------------------------------------------
1 | import statuses from "@bundled-es-modules/statuses";
2 | import { format } from "outvariant";
3 |
4 | import {
5 | GraphQLHandler,
6 | type GraphQLVariables,
7 | type Match,
8 | type ParsedGraphQLRequest,
9 | } from "msw";
10 |
11 | // These utilities are taken wholesale from MSW, as they're not exported from
12 | // the package, in order to build an augmented version of MSW's
13 | // graphql.operation catchall request handler class.
14 |
15 | // MIT License
16 |
17 | // Copyright (c) 2018–present Artem Zakharchenko
18 |
19 | // Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
20 |
21 | // The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
22 |
23 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
24 |
25 | // From https://github.com/mswjs/msw/blob/63b78315cdbe8435f9e6ec627022d67fa38a9703/src/core/handlers/GraphQLHandler.ts#L35
26 | export type GraphQLRequestParsedResult = {
27 | match: Match;
28 | cookies: Record
207 |
209 | {data ? (
210 | <>
211 | Wins: {data?.wins}
212 |Losses: {data?.losses}
213 | 214 | ) : null} 215 |-
309 | {data.repository.issues.edges.map((item) => (
310 |
- {item.node.url} 311 | ))} 312 |