18 | 
24 | Relay Demo
29 | :Apollo Demo
30 | } 31 |
32 | Apollo
33 |
39 | Relay
40 |
41 | This site is just for demonstration purposes. Please don't enter personal information.
42 | {relay 43 | ?
7 | 
10 |
14 | );
15 | };
16 |
17 | export default LogoSection;
18 |
--------------------------------------------------------------------------------
/types/relay-runtime_types.js:
--------------------------------------------------------------------------------
1 | declare module 'relay-runtime' {
2 | declare export var ConnectionHandler: any;
3 | declare export var RecordSource: any;
4 | declare export var Store: any;
5 | declare export var Environment: any;
6 | declare export var Network: any;
7 |
8 | declare export type RequestNode = any;
9 | declare export type Variables = any;
10 | declare export type ReaderFragment = any;
11 | declare export type ConcreteRequest = any;
12 | declare export opaque type FragmentReference;
13 | }
14 |
--------------------------------------------------------------------------------
/ts/components/CreatorCard.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface CreatorCardProps {
4 | key: number;
5 | author: {
6 | img: string;
7 | name: string;
8 | link: string;
9 | }
10 | }
11 |
12 | const CreatorCard = ({author}: CreatorCardProps): JSX.Element => {
13 | const {img, name, link} = author;
14 |
15 | return (
16 |
10 | 11 | Painless forms for GraphQL. 12 |
13 |
17 | {/* */}
21 | {name}
22 |
periqles
18 |
2 | 
3 |
periqles
6 |7 | Painless forms for GraphQL. 8 |
9 | 10 | This is a demo of [periqles](https://github.com/oslabs-beta/periqles/blob/main/README.md), a form library for GraphQL that supports Relay and Apollo clients. 11 | 12 | [See it deployed →](https://periqles.herokuapp.com/) 13 | 14 | This repo uses Relay and Apollo clients side-by-side on the same Express server to demonstrate how to use periqles in either client. As such, it's a little bootstrappy on the backend; your own backend will probably look very different. Please consult [the periqles readme](https://github.com/oslabs-beta/periqles/blob/main/README.md) for documentation. 15 | 16 | If there's anything else about periqles you'd like to see demonstrated, please write an [issue](https://github.com/oslabs-beta/periqles-demo/issues) or open a pull request. 17 | -------------------------------------------------------------------------------- /ts/components/Creators.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import CreatorCard from './CreatorCard'; 3 | 4 | const Creators = (): JSX.Element => { 5 | const authors = [ 6 | { 7 | img: '../../public/assets/cameron.jpeg', 8 | name: 'Cameron Baumgartner', 9 | link: 'https://github.com/cameronbaumgartner', 10 | }, 11 | { 12 | img: '../../public/assets/ian.jpeg', 13 | name: 'Ian Garrett', 14 | link: 'https://github.com/eeeeean', 15 | }, 16 | { 17 | img: '../../public/assets/kelly.jpeg', 18 | name: 'Kelly Porter', 19 | link: 'https://github.com/kporter101', 20 | }, 21 | { 22 | img: '../../public/assets/joe.jpeg', 23 | name: 'Joe Toledano', 24 | link: 'https://github.com/JosephToledano', 25 | }, 26 | ]; 27 | 28 | return ( 29 | 35 | ); 36 | }; 37 | 38 | export default Creators; -------------------------------------------------------------------------------- /apolloSchema.js: -------------------------------------------------------------------------------- 1 | // const { gql } = require('apollo-server-express'); 2 | 3 | 4 | 5 | // const typeDefs = gql` 6 | // type Query { 7 | // demoUser: DemoUser 8 | // } 9 | 10 | // type Mutation { 11 | // addUser( 12 | // input: AddUserInput!): DemoUser 13 | // } 14 | 15 | // input AddUserInput { 16 | // username: String! 17 | // password: String! 18 | // email: String! 19 | // gender: GenderEnum! 20 | // pizzaTopping: PizzaToppingEnum! 21 | // age: Int! 22 | // } 23 | 24 | // type DemoUser { 25 | // id: ID! 26 | // userId: String! 27 | // username: String! 28 | // password: String! 29 | // email: String! 30 | // gender: GenderEnum! 31 | // pizzaTopping: PizzaToppingEnum! 32 | // age: Int! 33 | // } 34 | 35 | // enum GenderEnum { 36 | // NON_BINARY 37 | // FEMALE 38 | // MALE 39 | // } 40 | 41 | // enum PizzaToppingEnum { 42 | // BUFFALO_CHICKEN 43 | // PEPPERONI 44 | // MEATLOVERS 45 | // EGGPLANT_PARM 46 | // OLIVES 47 | // HAWAIIAN 48 | // } 49 | // `; 50 | 51 | // export default typeDefs; 52 | -------------------------------------------------------------------------------- /apolloResolvers.js: -------------------------------------------------------------------------------- 1 | const { getLastDemoUserOrThrow, addUser } = require('./data/database.js'); 2 | 3 | module.exports = { 4 | Query: { 5 | // demoUser: (_, __, { database }) => database.getLastDemoUserOrThrow(), 6 | demoUser: (_, __, ___) => getLastDemoUserOrThrow(), 7 | }, 8 | Mutation: { 9 | // addUser: (_, { 10 | // username, 11 | // password, 12 | // email, 13 | // gender, 14 | // pizzaTopping, 15 | // age, 16 | // }, { database }) => database.addUser(username, password, email, gender, pizzaTopping, age), 17 | addUser: (_, { input }, ___) => { 18 | return addUser(input); 19 | }, 20 | }, 21 | }; 22 | 23 | // mutation AddUser { 24 | // addUser(username: "asdf", password: "asdf", email: "asdf@asdf", gender: "NON_BINARY", pizzaTopping: "HAWAIIAN", age: 1) { 25 | // username 26 | // } 27 | // } 28 | // query DemoUser { 29 | // demoUser { 30 | // username 31 | // password 32 | // email 33 | // gender 34 | // pizzaTopping 35 | // age 36 | // } 37 | // } 38 | // "eslintConfig": { 39 | // "extends": "react-app" 40 | // }, 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 OSLabs Beta 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /ts/components/LinksSection.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | const LinksSection = (): JSX.Element => { 4 | 5 | return ( 6 |
7 |
8 | Periqles is a component library for Relay and Apollo that makes it easy to collect user input.
9 |
12 |
26 |
27 | );
28 | };
29 |
30 | export default LinksSection;
31 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist/", // path to output directory
4 | "sourceMap": true, // allow sourcemap support
5 | "strictNullChecks": true, // enable strict null checks as a best practice
6 | "module": "commonjs", // specify module code generation
7 | "jsx": "react", // use typescript to transpile jsx to js
8 | "target": "es5", // specify ECMAScript target version
9 | "allowJs": true, // allow a partial TypeScript and JavaScript codebase
10 | "moduleResolution": "node", // use Node.js's module resolution strategy to resolve non-relative imports
11 | "allowSyntheticDefaultImports": true,
12 | // Ensure that .d.ts files are created by tsc, but not .js files
13 | "declaration": true, // generate .d.ts automatically from types throughout project
14 | "emitDeclarationOnly": true, // only generate .d.ts, not .js
15 | // Ensure that Babel can safely transpile files in the TypeScript project
16 | "isolatedModules": true,
17 | "esModuleInterop": true, //flag enabled for compatibility with Jest (and Babel):
18 | "typeRoots": [
19 | "./types",
20 | "node_modules/@types"
21 | ]
22 | },
23 | "paths": {
24 | "components/*": ["ts/components/*"]
25 | },
26 | "include": ["./ts/"]
27 | }
28 |
--------------------------------------------------------------------------------
/data/schema.graphql:
--------------------------------------------------------------------------------
1 | type Query {
2 | demoUser: DemoUser
3 |
4 | """Fetches an object given its ID"""
5 | node(
6 | """The ID of an object"""
7 | id: ID!
8 | ): Node
9 | }
10 |
11 | type DemoUser {
12 | """The ID of an object"""
13 | id: ID!
14 | userId: String!
15 | username: String!
16 | password: String!
17 | email: String!
18 | gender: GenderEnum!
19 | pizzaTopping: PizzaToppingEnum!
20 | age: Int!
21 | }
22 |
23 | enum GenderEnum {
24 | NON_BINARY
25 | FEMALE
26 | MALE
27 | }
28 |
29 | enum PizzaToppingEnum {
30 | BUFFALO_CHICKEN
31 | PEPPERONI
32 | MEATLOVERS
33 | EGGPLANT_PARM
34 | OLIVES
35 | HAWAIIAN
36 | }
37 |
38 | """An object with an ID"""
39 | interface Node {
40 | """The id of the object."""
41 | id: ID!
42 | }
43 |
44 | type Mutation {
45 | addUser(input: AddUserInput!): AddUserPayload
46 | }
47 |
48 | type AddUserPayload {
49 | userId: String!
50 | username: String!
51 | password: String!
52 | email: String!
53 | gender: GenderEnum!
54 | pizzaTopping: PizzaToppingEnum!
55 | age: Int!
56 | clientMutationId: String
57 | }
58 |
59 | input AddUserInput {
60 | username: String!
61 | password: String!
62 | email: String!
63 | gender: GenderEnum!
64 | pizzaTopping: PizzaToppingEnum!
65 | age: Int!
66 | clientMutationId: String
67 | }
68 |
--------------------------------------------------------------------------------
/ts/mutations/AddUserMutation.js:
--------------------------------------------------------------------------------
1 | import {commitMutation, graphql} from 'react-relay';
2 |
3 | const mutation = graphql`
4 | mutation AddUserMutation($input: AddUserInput!) {
5 | addUser(input: $input) {
6 | userId
7 | username
8 | password
9 | email
10 | gender
11 | pizzaTopping
12 | age
13 | }
14 | }
15 | `;
16 |
17 | let tempID = 0;
18 |
19 | function commit(
20 | environment,
21 | username,
22 | password,
23 | email,
24 | gender,
25 | pizzaTopping,
26 | age,
27 | ) {
28 | const input = {
29 | username,
30 | password,
31 | email,
32 | gender,
33 | pizzaTopping,
34 | age,
35 | clientMutationId: `${tempID++}`,
36 | };
37 |
38 | return commitMutation(environment, {
39 | mutation,
40 | variables: {
41 | input,
42 | },
43 | updater: (store) => {
44 | const payload = store.getRootField('addUser');
45 | const newUserId = payload.getValue('userId');
46 | const newUsername = payload.getValue('username');
47 | const newPassword = payload.getValue('password');
48 | const newEmail = payload.getValue('email');
49 | const newGender = payload.getValue('gender');
50 | const newPizzaTopping = payload.getValue('pizzaTopping');
51 | const newAge = payload.getValue('age');
52 | },
53 | });
54 | }
55 |
56 | export default {commit};
57 |
--------------------------------------------------------------------------------
/ts/components/Demo.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 | import UserProfile from './relay/UserProfile';
3 | import ApolloUserProfile from './ApolloUserProfile';
4 | import {
5 | ApolloClient,
6 | NormalizedCacheObject,
7 | ApolloProvider
8 | } from '@apollo/client';
9 | import { cache } from '../apolloCache';
10 |
11 | let URI = '';
12 | if (process.env.NODE_ENV === 'development') {
13 | URI = 'http://localhost:8080/graphql';
14 | }
15 | else URI = 'https://periqles.herokuapp.com/graphql';
16 |
17 | const client: ApolloClient
8 | Periqles is a component library for Relay and Apollo that makes it easy to collect user input.
9 |
10 |
Periqles abstracts away the dirty work of form creation — with override switches built in for the design-conscious developer — so you can be free to focus on business logic.
11 |
12 |
26 |
100 |
106 | )
107 | }
108 |
109 | return (
110 | {demoUser.username}
101 |{demoUser.email}
102 |{demoUser.gender}
103 |{demoUser.pizzaTopping}
104 |{demoUser.age}
105 |
111 |
112 |
120 |
125 |
126 |
127 |
129 |
130 |
132 | {"mutation AddUser($input: AddUserInput!){\n"+
133 | " addUser(input: $input) {\n"+
134 | " username\n"+
135 | " password\n"+
136 | " email\n"+
137 | " gender\n"+
138 | " pizzaTopping\n"+
139 | " age\n"+
140 | " }\n"+
141 | "}"}
142 |
143 |
144 |
145 |
147 | {"
157 |
158 |
159 |
160 |
161 | );
162 | };
163 |
164 | export default ApolloUserProfile;
165 |
--------------------------------------------------------------------------------
/ts/components/relay/UserProfile.tsx:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 | import {QueryRenderer, graphql} from 'react-relay';
3 | import {Environment, Network, RecordSource, Store} from 'relay-runtime';
4 | import PeriqlesForm from 'periqles';
5 | import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
6 | import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
7 | import js from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
8 | import {vscDarkPlus} from 'react-syntax-highlighter/dist/esm/styles/prism';
9 |
10 | SyntaxHighlighter.registerLanguage('jsx', jsx);
11 | SyntaxHighlighter.registerLanguage('js', js);
12 | interface QueryResponse {
13 | demoUser?: RecordMost Recently Added User
121 | {loading ?Loading data...
: null} 122 | {error ?ERROR: {JSON.stringify(error)}
: null} 123 | {data && data.demoUser ? renderUser(data.demoUser):Sign up...
} 124 |Apollo Code Examples
128 |Mutation Schema
131 |PeriqlesForm Tag
146 |
92 |
93 |
102 | {
119 | if (props && !props.demoUser) {
120 | return
142 |
143 |
144 |
146 |
147 |
149 | {"mutation UserProfile_AddUserMutation($input: AddUserInput!) {\n"+
150 | " addUser(input: $input) {\n"+
151 | " userId\n"+
152 | " username\n"+
153 | " password\n"+
154 | " email\n"+
155 | " gender\n"+
156 | " pizzaTopping\n"+
157 | " age\n"+
158 | " }\n"+
159 | "}"}
160 |
161 |
162 |
163 |
165 | {"
176 |
177 |
178 |
179 |
180 | );
181 | };
182 |
183 | export default UserProfile;
184 |
--------------------------------------------------------------------------------
/public/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'FV Almelo';
3 | src: url('FVAlmelo.woff2') format('woff2'),
4 | url('FVAlmelo.woff') format('woff'),
5 | url('FVAlmelo.ttf') format('truetype');
6 | font-weight: 500;
7 | font-style: normal;
8 | font-display: swap;
9 | }
10 |
11 | html,
12 | body, #root {
13 | margin: 0;
14 | padding: 0;
15 | width: 100%;
16 | height: 100%;
17 | }
18 |
19 |
20 | body {
21 | font: 18px 'Helvetica Neue', Helvetica, Arial, sans-serif;
22 | line-height: 1.4em;
23 | background: #ffffff;
24 | color: black;
25 | -webkit-font-smoothing: antialiased;
26 | -moz-osx-font-smoothing: grayscale;
27 | font-weight: 400;
28 | position: relative;
29 | }
30 |
31 | body * {
32 | box-sizing: border-box;
33 | }
34 |
35 | button {
36 | margin: 0;
37 | padding: 0;
38 | border: 0;
39 | width: 100%;
40 | background: none;
41 | font-size: 100%;
42 | vertical-align: baseline;
43 | font-family: inherit;
44 | font-weight: inherit;
45 | color: inherit;
46 | -webkit-appearance: none;
47 | appearance: none;
48 | -webkit-font-smoothing: antialiased;
49 | -moz-osx-font-smoothing: grayscale;
50 | background-color: #C9E465;
51 | color: black;
52 | }
53 |
54 | button:hover {
55 | background-color: #b1c955;
56 | color: white;
57 | }
58 |
59 | header {
60 | font-family: 'FVAlmelo', Helvetica, Arial, sans-serif;
61 | background-color: black;
62 | color: #b1c955;
63 | margin: 0;
64 | padding: 25px 50px;
65 | height: 75px;
66 | position: fixed;
67 | right: 0;
68 | left: 0;
69 | z-index: 999;
70 | }
71 |
72 | header h1 {
73 | margin: 0;
74 | text-align: right;
75 | color: #b1c955;
76 | }
77 |
78 | header a, footer a {
79 | color: inherit;
80 | text-decoration: none;
81 | }
82 |
83 | header a:hover, footer a:hover {
84 | color: white;
85 | }
86 |
87 | a {
88 | color: inherit;
89 | }
90 |
91 | a:visited {
92 | color: inherit;
93 | }
94 |
95 | .LogoSection {
96 | background-color: black;
97 | color: white;
98 | padding: 75px 30px 30px 30px;
99 | width: 100vw;
100 | height: 85vh;
101 | display: flex;
102 | flex-direction: column;
103 | justify-content: center;
104 | align-items: center;
105 | }
106 |
107 | #periqles-logo {
108 | width: 90%;
109 | max-width: 500px;
110 | }
111 |
112 | .LinksSection {
113 | background-color: #b1c955;
114 | color: white;
115 | padding: 30px;
116 | width: 100vw;
117 | min-height: 400px;
118 | display: flex;
119 | flex-direction: column;
120 | align-items: center;
121 | }
122 |
123 | #long-pitch {
124 | margin-top: 100px;
125 | }
126 |
127 | .repo-logos {
128 | display: flex;
129 | flex-direction: row;
130 | align-items: center;
131 | }
132 |
133 | .marketing-logo {
134 | margin: 0 10px;
135 | }
136 |
137 | .Demo {
138 | width: 100%;
139 | margin: 0 auto 50px auto;
140 | padding: 10px;
141 | text-align: center;
142 | }
143 |
144 | .UserProfile {
145 | margin-top: 50px;
146 | display: flex;
147 | flex-direction: column;
148 | justify-content: space-around;
149 | align-items: center;
150 | }
151 |
152 | .PeriqlesForm {
153 | border: 1px solid rgba(0, 0, 0, 0.16);
154 | width: 90%;
155 | }
156 |
157 | .PeriqlesForm, .PeriqlesForm * {
158 | border-radius: 10px;
159 | }
160 |
161 | /* one method to hide label text */
162 | /* .PeriqlesForm label:not(.periqles-radio-option-label) {
163 | color:white;
164 | } */
165 |
166 | .UserProfile-main {
167 | text-align:left;
168 | margin-top: 20px;
169 | border: 1px solid rgba(0, 0, 0, 0.16);
170 | border-radius: 10px;
171 | padding: 4%;
172 | }
173 |
174 | .UserProfile-main label {
175 | font-weight: bold;
176 | }
177 |
178 | .CodeDemo {
179 | background-color: #b1c955;
180 | color: white;
181 | display: flex;
182 | flex-direction: column;
183 | align-items: center;
184 | margin-top: 75px;
185 | }
186 |
187 | .CodeDemo h1 {
188 | margin-block-start: 0.75em;
189 | margin-block-end: 0.25em;
190 | }
191 |
192 | .CodeDemo h3 {
193 | margin-block-end: 0;
194 | }
195 |
196 | .Codeblocks {
197 | display: flex;
198 | flex-direction: column;
199 | justify-content: space-evenly;
200 | align-items: center;
201 | width: 100%;
202 | padding: 10px 10px 20px 10px;
203 | }
204 |
205 | .SchemaCode, .PeriqlesCode {
206 | width: 90%;
207 | max-width: 750px;
208 | overflow-x: auto;
209 | }
210 |
211 | footer {
212 | font-family: 'FVAlmelo', Helvetica, Arial, sans-serif;
213 | background-color: black;
214 | color: #C9E465;
215 | margin: 0;
216 | padding: 25px;
217 | height: auto;
218 | width: 100%;
219 | text-align: center;
220 | }
221 |
222 | h1 {
223 | font-size: 36px;
224 | line-height: 45px;
225 | }
226 |
227 | h2 {
228 | font-size: 28px;
229 | line-height: 35px;
230 | }
231 |
232 | /* Relay/Apollo toggle */
233 | /* The switch - the box around the slider */
234 | .switch {
235 | position: relative;
236 | display: inline-block;
237 | width: 60px;
238 | height: 34px;
239 | margin: 0 10px;
240 | }
241 |
242 | /* Hide default HTML checkbox */
243 | .switch input {
244 | opacity: 0;
245 | width: 0;
246 | height: 0;
247 | }
248 |
249 | /* The slider */
250 | .slider {
251 | position: absolute;
252 | cursor: pointer;
253 | top: 0;
254 | left: 0;
255 | right: 0;
256 | bottom: 0;
257 | background-color: #b1c955;
258 | -webkit-transition: .4s;
259 | transition: .4s;
260 | }
261 |
262 | .slider:before {
263 | position: absolute;
264 | content: "";
265 | height: 26px;
266 | width: 26px;
267 | left: 4px;
268 | bottom: 4px;
269 | background-color: white;
270 | -webkit-transition: .4s;
271 | transition: .4s;
272 | }
273 |
274 | input:checked + .slider {
275 | background-color: #C9E465;
276 | }
277 |
278 | input:focus + .slider {
279 | box-shadow: 0 0 1px #b1c955;
280 | }
281 |
282 | input:checked + .slider:before {
283 | -webkit-transform: translateX(26px);
284 | -ms-transform: translateX(26px);
285 | transform: translateX(26px);
286 | }
287 |
288 | /* Rounded sliders */
289 | .slider.round {
290 | border-radius: 34px;
291 | }
292 |
293 | .slider.round:before {
294 | border-radius: 50%;
295 | }
296 |
297 | @media (min-width: 700px) {
298 | button {
299 | width: fit-content;
300 | }
301 |
302 | .LogoSection, .LinksSection {
303 | flex-direction: row;
304 | justify-content: space-evenly;
305 | padding: 30px 15%;
306 | }
307 |
308 | .Demo {
309 | padding: 30px;
310 | }
311 |
312 | #periqles-logo {
313 | width: 40%;
314 | }
315 |
316 | #short-pitch, #long-pitch {
317 | max-width: 500px;
318 | }
319 |
320 | #short-pitch {
321 | margin-left: 40px;
322 | }
323 |
324 | #long-pitch {
325 | margin-right: 40px;
326 | margin-top: 10px;
327 | }
328 |
329 | .marketing-logo {
330 | margin: 0 20px;
331 | }
332 |
333 | .UserProfile {
334 | flex-direction: row;
335 | justify-content: space-evenly;
336 | align-items: flex-start;
337 | }
338 |
339 | .PeriqlesForm {
340 | width: 500px;
341 | margin-right: 30px;
342 | }
343 |
344 | .UserProfile-main {
345 | margin: 0;
346 | }
347 |
348 | footer {
349 | text-align: left;
350 | padding: 30px 15%;
351 | }
352 | }
353 |
354 | @media (min-width: 1690px) {
355 | .Codeblocks {
356 | height: 440px;
357 | flex-direction: row;
358 | justify-content: space-evenly;
359 | align-items: center;
360 | padding: 30px 30px 60px 30px;
361 | }
362 |
363 | .SchemaCode {
364 | margin-right: 30px;
365 | }
366 | }
--------------------------------------------------------------------------------
/types/react-relay_types.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: 311012da78555b97190c86fa4c196bf3
2 | // flow-typed version: 443dcee08c/react-relay_v1.x.x/flow_>=v0.47.x
3 |
4 | // https://raw.githubusercontent.com/mrtnzlml/quick-payments/8a0fa46a490647aec676fc823c88079e8319dee5/frontend/flow-typed/npm/react-relay_v1.x.x.js
5 |
6 | import * as React from 'react';
7 |
8 | import {FragmentReference} from 'relay-runtime';
9 |
10 | declare module 'react-relay' {
11 | declare export type RecordState = 'EXISTENT' | 'NONEXISTENT' | 'UNKNOWN';
12 |
13 | declare export type onCompleted = (
14 | response: ?Object,
15 | errors: ?ArrayMost Recently Added User
103 |Sign up...
; 121 | } 122 | if (props && props.demoUser) { 123 | const {demoUser} = props; 124 | return ( 125 |
126 |
132 | );
133 | } else if (error) {
134 | console.error(error);
135 | return {demoUser.username}
127 |{demoUser.email}
128 |{demoUser.gender}
129 |{demoUser.pizzaTopping}
130 |{demoUser.age}
131 |Something went wrong...
; 136 | } 137 | 138 | returnLoading...
; 139 | }} 140 | /> 141 |