├── .gitignore
├── public
    ├── favicon.ico
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── brooklyn.png
    │   ├── Style.css
    │   └── loading.svg
    ├── relay
    │   ├── index.js
    │   ├── Environment.js
    │   ├── fetchQuery.js
    │   └── createQueryRendererModern.js
    ├── index.js
    ├── Header.js
    ├── Loading.js
    ├── Footer.js
    ├── Home.js
    ├── App.js
    ├── ListPage.js
    ├── __generated__
    │   ├── Post_post.graphql.js
    │   ├── ListPage_viewer.graphql.js
    │   ├── DetailQuery.graphql.js
    │   └── HomeQuery.graphql.js
    ├── Post.js
    └── Detail.js
├── README.md
├── package.json
└── schema.graphql


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | server
3 | build
4 | .nowignore
5 | now.json


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luansantosti/brooklyn99-cast/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/brooklyn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luansantosti/brooklyn99-cast/HEAD/src/assets/brooklyn.png


--------------------------------------------------------------------------------
/src/relay/index.js:
--------------------------------------------------------------------------------
1 | export { default as createQueryRendererModern } from './createQueryRendererModern';
2 | export { default as Environment } from './Environment';
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'));
6 | 


--------------------------------------------------------------------------------
/src/assets/Style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | html, body {
 5 |   margin: 0px;
 6 |   padding: 0px;
 7 | }
 8 | body {
 9 |   font-family: 'Open Sans', sans-serif;
10 |   background: #1d1d26;
11 | }
12 | img {
13 |   max-width: 100%;
14 | }


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Create React App + Relay 
 2 | 
 3 | Based on this boilerplate https://github.com/sibelius/create-react-app-relay-modern from Sibelius/Entria, this is an example project using CRA + Relay + Graphql.
 4 | 
 5 | ### To setup 
 6 | 
 7 | ```
 8 | yarn
 9 | ```
10 | 
11 | ### To generate compiled queries 
12 | 
13 | ```
14 | yarn relay
15 | ```
16 | 
17 | ### To run your app
18 | 
19 | ```
20 | yarn start
21 | ```
22 | 
23 | 
24 | 
25 | 
26 | 


--------------------------------------------------------------------------------
/src/relay/Environment.js:
--------------------------------------------------------------------------------
 1 | import { Environment, Network, RecordSource, Store } from 'relay-runtime';
 2 | import RelayNetworkLogger from 'relay-runtime/lib/RelayNetworkLogger';
 3 | 
 4 | import fetchQuery from './fetchQuery';
 5 | 
 6 | const network = Network.create(fetchQuery);
 7 | 
 8 | const source = new RecordSource();
 9 | const store = new Store(source);
10 | 
11 | const env = new Environment({
12 |   network,
13 |   store,
14 | });
15 | 
16 | export default env;
17 | 


--------------------------------------------------------------------------------
/src/Header.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from "react-router-dom"
 3 | import BrooklynLogo from './assets/brooklyn.png'
 4 | import styled from 'styled-components'
 5 | 
 6 | const StyledHeader = styled.div`
 7 |   padding: 40px 15px;
 8 |   text-align: center;
 9 |   p {
10 |     color: #797979;
11 |   }
12 | `
13 | 
14 | const Header = () => (
15 |   <StyledHeader>
16 |     <Link to="/">
17 |       <img src={BrooklynLogo} alt="Brooklyn 99"/>
18 |     </Link>
19 |     <p>The most important cop show. Ever.</p>
20 |   </StyledHeader>
21 | )
22 | 
23 | export default Header


--------------------------------------------------------------------------------
/src/Loading.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | import { ReactComponent as IconLoading } from './assets/loading.svg'
 5 | 
 6 | const StyledLoading = styled.div`
 7 |   background: #232323;
 8 |   position: fixed;
 9 |   left: 0px;
10 |   right: 0px;
11 |   bottom: 0px;
12 |   top: 0px;
13 |   display: flex;
14 |   align-items: center;
15 |   justify-content: center;
16 |   flex-direction: column;
17 |   color: #484848;
18 | `
19 | 
20 | const Loading = () => (
21 |   <StyledLoading>
22 |     <IconLoading />
23 |     <p>Loading...</p>
24 |   </StyledLoading>
25 | )
26 | 
27 | export default Loading


--------------------------------------------------------------------------------
/src/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | const StyledFooter = styled.div`
 5 |   text-align: center;
 6 |   padding: 40px 0 0 0;
 7 |   color: #353535;
 8 |   a {
 9 |     color: #383838;
10 |     text-decoration: none;
11 |   }
12 | `
13 | 
14 | const Footer = () => (
15 |   <StyledFooter>
16 |     Characters from <a href="https://www.artstation.com/luigil" target="_blank">Luigi Lucarelli</a> <br/>
17 |     Biographies from <a href="https://brooklyn99.fandom.com" target="_blank">Brooklyn Nine-Nine Wiki</a> <br/>
18 |     <a href="https://github.com/luansantosti/brooklyn99-cast" target="_blank">@luansantosti</a>
19 |   </StyledFooter>
20 | )
21 | 
22 | export default Footer
23 | 
24 | 


--------------------------------------------------------------------------------
/src/Home.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import graphql from 'babel-plugin-relay/macro';
 3 | import { QueryRenderer } from 'react-relay';
 4 | import { Environment } from './relay';
 5 | import Loading from './Loading'
 6 | 
 7 | import ListPage from './ListPage'
 8 | 
 9 | class Home extends Component {
10 |   render() {
11 |     return (
12 |       <QueryRenderer 
13 |       environment={Environment}
14 |       query={HomeQuery}
15 |       render={({error, props}) => {
16 |         if (error) {
17 |           return <div>{error.message}</div>
18 |         } else if (props) {
19 |           return <ListPage viewer={props.viewer} />
20 |         }
21 |         return <Loading />
22 |       }}/>
23 |     )
24 |   }
25 | }
26 | 
27 | const HomeQuery = graphql`
28 |   query HomeQuery {
29 |     viewer {
30 |       ...ListPage_viewer
31 |     }
32 |   }
33 | `
34 | 
35 | export default Home


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { BrowserRouter as Router, Route } from "react-router-dom";
 3 | import styled from 'styled-components'
 4 | 
 5 | import './assets/Style.css';
 6 | import Header from './Header'
 7 | import Home from './Home'
 8 | import Detail from './Detail'
 9 | import Footer from './Footer'
10 | 
11 | const Container = styled.div`
12 |   max-width: 1200px;
13 |   margin: auto;
14 |   padding: 0px 15px 40px 15px;
15 | `
16 | 
17 | 
18 | class App extends Component {
19 |   render() {
20 |     return (
21 |       <Router>
22 |         <div>
23 |           <Header />
24 |           <Container>
25 |             <Route exact path="/" component={Home} />
26 |             <Route path="/post/:id" component={Detail} />
27 |             <Footer />
28 |           </Container>
29 |         </div>
30 |       </Router>     
31 |     );
32 |   }
33 | }
34 | 
35 | 
36 | 
37 | export default App;


--------------------------------------------------------------------------------
/src/relay/fetchQuery.js:
--------------------------------------------------------------------------------
 1 | import  { Variables, UploadableMap } from 'react-relay';
 2 | import  { RequestNode } from 'relay-runtime';
 3 | 
 4 | export const GRAPHQL_URL = 'https://api.graph.cool/relay/v1/cju61d6jg2hxw0104ldsq92lk';
 5 | 
 6 | // Define a function that fetches the results of a request (query/mutation/etc)
 7 | // and returns its results as a Promise:
 8 | const fetchQuery = async (request: RequestNode, variables: Variables) => {
 9 |   const body = JSON.stringify({
10 |     name: request.name, // used by graphql mock on tests
11 |     query: request.text, // GraphQL text from input
12 |     variables,
13 |   });
14 |   const headers = {
15 |     Accept: 'application/json',
16 |     'Content-type': 'application/json',
17 |   };
18 | 
19 |   const response = await fetch(GRAPHQL_URL, {
20 |     method: 'POST',
21 |     headers,
22 |     body,
23 |   });
24 | 
25 |   return await response.json();
26 | };
27 | 
28 | export default fetchQuery;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cra-relay",
 3 |   "version": "0.1.0",
 4 |   "browserslist": [
 5 |     ">0.2%",
 6 |     "not dead",
 7 |     "not ie <= 11",
 8 |     "not op_mini all"
 9 |   ],
10 |   "dependencies": {
11 |     "react": "^16.8.2",
12 |     "react-dom": "^16.8.2",
13 |     "react-relay": "^2.0.0",
14 |     "react-router-dom": "^5.0.0",
15 |     "react-scripts": "2.1.5",
16 |     "styled-components": "^4.2.0"
17 |   },
18 |   "devDependencies": {
19 |     "babel-plugin-relay": "^2.0.0",
20 |     "graphql": "^14.1.1",
21 |     "relay-compiler": "^2.0.0"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": "react-app"
25 |   },
26 |   "private": true,
27 |   "scripts": {
28 |     "build": "react-scripts build",
29 |     "eject": "react-scripts eject",
30 |     "relay": "relay-compiler --src ./src --schema ./schema.graphql",
31 |     "start": "react-scripts start",
32 |     "test": "react-scripts test",
33 |     "now-build": "react-scripts build"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/ListPage.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import graphql from 'babel-plugin-relay/macro';
 3 | import {
 4 |   createFragmentContainer
 5 | } from 'react-relay'
 6 | import styled from 'styled-components'
 7 | 
 8 | import Post from './Post'
 9 | 
10 | const StyledListPage = styled.div`
11 |   display: grid;
12 |   grid-template-columns: 1fr 1fr 1fr;
13 |   grid-gap: 25px 15px;
14 |   @media (max-width: 767px) {
15 |     grid-template-columns: 1fr;
16 |   }
17 | `
18 | 
19 | class ListPage extends Component {
20 |   render() {
21 |     return (
22 |       <StyledListPage>
23 |         {this.props.viewer.allPosts.edges.map(({node}) => 
24 |           <Post key={node.__id} post={node} /> 
25 |         )}
26 |       </StyledListPage>
27 |     )
28 |   }
29 | }
30 | 
31 | export default createFragmentContainer(ListPage, graphql`
32 |   fragment ListPage_viewer on Viewer {
33 |     allPosts(last: 100, orderBy: createdAt_ASC) @connection(key: "ListPage_allPosts", filters: []) {
34 |       edges {
35 |         node {
36 |           ...Post_post 
37 |         }
38 |       }
39 |     }
40 |   }
41 | `)


--------------------------------------------------------------------------------
/src/relay/createQueryRendererModern.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { QueryRenderer } from 'react-relay';
 3 | 
 4 | import  { GraphQLTaggedNode, Variables } from 'react-relay';
 5 | 
 6 | import Environment from './Environment';
 7 | 
 8 | type Config = {
 9 |   query: GraphQLTaggedNode,
10 |   queriesParams?: (props: Object) => object,
11 |   variables?: Variables,
12 |   hideSplash?: boolean,
13 | };
14 | 
15 | export default function createQueryRenderer(
16 |   FragmentComponent,
17 |   Component,
18 |   config: Config,
19 | ) {
20 |   const { query, queriesParams } = config;
21 | 
22 |   class QueryRendererWrapper extends React.Component<{}> {
23 |     render() {
24 |       const variables = queriesParams ? queriesParams(this.props) : config.variables;
25 | 
26 |       return (
27 |         <QueryRenderer
28 |           environment={Environment}
29 |           query={query}
30 |           variables={variables}
31 |           render={({ error, props }) => {
32 |             if (error) {
33 |               return <span>{error.toString()}</span>;
34 |             }
35 | 
36 |             if (props) {
37 |               return <FragmentComponent {...this.props} query={props} />;
38 |             }
39 | 
40 |             return <span>loading</span>;
41 |           }}
42 |         />
43 |       );
44 |     }
45 |   }
46 | 
47 |   return QueryRendererWrapper;
48 | }
49 | 


--------------------------------------------------------------------------------
/src/__generated__/Post_post.graphql.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @flow
 3 |  */
 4 | 
 5 | /* eslint-disable */
 6 | 
 7 | 'use strict';
 8 | 
 9 | /*::
10 | import type { ReaderFragment } from 'relay-runtime';
11 | import type { FragmentReference } from "relay-runtime";
12 | declare export opaque type Post_post$ref: FragmentReference;
13 | export type Post_post = {|
14 |   +id: string,
15 |   +imageUrl: string,
16 |   +title: string,
17 |   +shortDescription: ?string,
18 |   +$refType: Post_post$ref,
19 | |};
20 | */
21 | 
22 | 
23 | const node/*: ReaderFragment*/ = {
24 |   "kind": "Fragment",
25 |   "name": "Post_post",
26 |   "type": "Post",
27 |   "metadata": null,
28 |   "argumentDefinitions": [],
29 |   "selections": [
30 |     {
31 |       "kind": "ScalarField",
32 |       "alias": null,
33 |       "name": "id",
34 |       "args": null,
35 |       "storageKey": null
36 |     },
37 |     {
38 |       "kind": "ScalarField",
39 |       "alias": null,
40 |       "name": "imageUrl",
41 |       "args": null,
42 |       "storageKey": null
43 |     },
44 |     {
45 |       "kind": "ScalarField",
46 |       "alias": null,
47 |       "name": "title",
48 |       "args": null,
49 |       "storageKey": null
50 |     },
51 |     {
52 |       "kind": "ScalarField",
53 |       "alias": null,
54 |       "name": "shortDescription",
55 |       "args": null,
56 |       "storageKey": null
57 |     }
58 |   ]
59 | };
60 | // prettier-ignore
61 | (node/*: any*/).hash = '1f779b194f627ec439bc514d571b3fb6';
62 | module.exports = node;
63 | 


--------------------------------------------------------------------------------
/src/assets/loading.svg:
--------------------------------------------------------------------------------
 1 | <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 2 | <svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
 3 |     <g fill="none" fill-rule="evenodd" stroke-width="2">
 4 |         <circle cx="22" cy="22" r="1">
 5 |             <animate attributeName="r"
 6 |                 begin="0s" dur="1.8s"
 7 |                 values="1; 20"
 8 |                 calcMode="spline"
 9 |                 keyTimes="0; 1"
10 |                 keySplines="0.165, 0.84, 0.44, 1"
11 |                 repeatCount="indefinite" />
12 |             <animate attributeName="stroke-opacity"
13 |                 begin="0s" dur="1.8s"
14 |                 values="1; 0"
15 |                 calcMode="spline"
16 |                 keyTimes="0; 1"
17 |                 keySplines="0.3, 0.61, 0.355, 1"
18 |                 repeatCount="indefinite" />
19 |         </circle>
20 |         <circle cx="22" cy="22" r="1">
21 |             <animate attributeName="r"
22 |                 begin="-0.9s" dur="1.8s"
23 |                 values="1; 20"
24 |                 calcMode="spline"
25 |                 keyTimes="0; 1"
26 |                 keySplines="0.165, 0.84, 0.44, 1"
27 |                 repeatCount="indefinite" />
28 |             <animate attributeName="stroke-opacity"
29 |                 begin="-0.9s" dur="1.8s"
30 |                 values="1; 0"
31 |                 calcMode="spline"
32 |                 keyTimes="0; 1"
33 |                 keySplines="0.3, 0.61, 0.355, 1"
34 |                 repeatCount="indefinite" />
35 |         </circle>
36 |     </g>
37 | </svg>


--------------------------------------------------------------------------------
/src/Post.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import graphql from 'babel-plugin-relay/macro';
 3 | import { Link } from "react-router-dom";
 4 | import {
 5 |   createFragmentContainer
 6 | } from 'react-relay'
 7 | import styled from 'styled-components'
 8 | 
 9 | const ListItem = styled.div`
10 |   background: #26262d;
11 |   display: flex;
12 |   flex-direction: column;
13 |   div {
14 |     padding: 0px 15px;
15 |     display: flex;
16 |     flex-direction: column;
17 |     height: 100%;
18 |     h2 {
19 |       color: #ffdd46;
20 |       margin-bottom: 0px;
21 |     }
22 |     p {
23 |       color: #797979;
24 |       font-size: 0.9rem;
25 |     }
26 |     a {
27 |       border-top: 1px solid #383838;
28 |       text-align: center;
29 |       padding: 10px;
30 |       margin-bottom: 5px;
31 |       text-decoration: none;
32 |       color: #9c9c9c;
33 |       margin-top: auto;
34 |       -webkit-transition: all 300ms ease;
35 |       -moz-transition: all 300ms ease;
36 |       -ms-transition: all 300ms ease;
37 |       -o-transition: all 300ms ease;
38 |       transition: all 300ms ease;
39 |       &:hover {
40 |         color: #ffdd46;
41 |       }
42 |     }
43 |   }
44 | `
45 | 
46 | class Post extends Component {
47 |   render() {
48 |     return (
49 |       <ListItem>
50 |         <img src={ this.props.post.imageUrl } alt={this.props.post.title}/>
51 |         <div>
52 |           <h2>{ this.props.post.title } </h2>
53 |           <p>{ this.props.post.shortDescription } </p>
54 |           <Link to={`/post/${this.props.post.id}`} >Read more</Link>
55 |         </div>
56 |       </ListItem>
57 |     )
58 |   }
59 | }
60 | 
61 | export default createFragmentContainer(Post, graphql`
62 |   fragment Post_post on Post {
63 |     id
64 |     imageUrl
65 |     title
66 |     shortDescription
67 |   }
68 | `)


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 |     <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" />
26 |     <title>Brooklyn 99 - Cast</title>
27 |   </head>
28 |   <body>
29 |     <noscript>You need to enable JavaScript to run this app.</noscript>
30 |     <div id="root"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/src/Detail.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import graphql from 'babel-plugin-relay/macro'
  3 | import { QueryRenderer } from 'react-relay'
  4 | import { Environment } from './relay'
  5 | import { Link } from "react-router-dom"
  6 | import styled from 'styled-components'
  7 | 
  8 | import Loading from './Loading'
  9 | 
 10 | const Wrapper = styled.div`
 11 |   display: grid;
 12 |   grid-template-columns: 1.4fr 1fr;
 13 |   grid-gap: 30px;
 14 |   @media (max-width: 767px) {
 15 |     grid-template-columns: 1fr;
 16 |   }
 17 |   h1 {
 18 |     color: #ffdd46;
 19 |     margin-top: 0px;
 20 |   }
 21 |   p {
 22 |     color: #797979;
 23 |   }
 24 |   a {
 25 |     color: #fff;
 26 |     @media (max-width: 767px) { 
 27 |       display: none;
 28 |     }
 29 |   }
 30 |   .info {
 31 |     display: flex;
 32 |     flex-direction: column;
 33 |   }
 34 | `
 35 | 
 36 | const StyledInfo = styled.div`
 37 |   padding: 0px 20px;
 38 |   background: #282834;
 39 |   h2 {
 40 |     font-size: 1rem;
 41 |     color: #fff;
 42 |   }
 43 |   p {
 44 |     font-size: 0.9rem;
 45 |   }
 46 | `
 47 | 
 48 | class Detail extends Component {
 49 |   render() {
 50 |     return (
 51 |       <QueryRenderer 
 52 |       environment={Environment}
 53 |       query={DetailQuery}
 54 |       variables={{idTest: this.props.match.params.id}}
 55 |       render={({error, props}) => {
 56 |         if (error) {
 57 |           return <div>{error.message}</div>
 58 |         } else if (props) {
 59 |           return <Post props={props.viewer.Post}/>
 60 |         }
 61 |         return <Loading />
 62 |       }}/>
 63 |     )
 64 |   }
 65 | }
 66 | 
 67 | const Post = ({props}) => (
 68 |   <Wrapper>
 69 |     <div>
 70 |       <h1>{props.title}</h1>
 71 |       <p>
 72 |         {props.description}
 73 |       </p>
 74 |       <Link to="/">Back</Link>
 75 |     </div>
 76 |     <div className="info">
 77 |       <img src={ props.imageUrl } alt={props.title}/>
 78 |       { props.occupation && <Info title='Occupation' props={props.occupation} /> }
 79 |       { props.nickname && <Info title='Nickname(s)' props={props.nickname} /> }
 80 |     </div> 
 81 |   </Wrapper>
 82 | )
 83 | 
 84 | const Info = ({ title, props}) => (
 85 |   <StyledInfo>
 86 |     <h2>{ title }</h2>
 87 |     <p>{ props }</p>
 88 |   </StyledInfo>
 89 | )
 90 | 
 91 | const DetailQuery = graphql`
 92 |   query DetailQuery($idTest: ID!) {
 93 |     viewer {
 94 |       Post(id: $idTest) {
 95 |         title
 96 |         imageUrl
 97 |         description
 98 |         nickname
 99 |         occupation
100 |       }
101 |     }
102 |   }
103 | `
104 | 
105 | export default Detail


--------------------------------------------------------------------------------
/src/__generated__/ListPage_viewer.graphql.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @flow
  3 |  */
  4 | 
  5 | /* eslint-disable */
  6 | 
  7 | 'use strict';
  8 | 
  9 | /*::
 10 | import type { ReaderFragment } from 'relay-runtime';
 11 | type Post_post$ref = any;
 12 | import type { FragmentReference } from "relay-runtime";
 13 | declare export opaque type ListPage_viewer$ref: FragmentReference;
 14 | export type ListPage_viewer = {|
 15 |   +allPosts: {|
 16 |     +edges: ?$ReadOnlyArray<?{|
 17 |       +node: {|
 18 |         +$fragmentRefs: Post_post$ref
 19 |       |}
 20 |     |}>
 21 |   |},
 22 |   +$refType: ListPage_viewer$ref,
 23 | |};
 24 | */
 25 | 
 26 | 
 27 | const node/*: ReaderFragment*/ = {
 28 |   "kind": "Fragment",
 29 |   "name": "ListPage_viewer",
 30 |   "type": "Viewer",
 31 |   "metadata": {
 32 |     "connection": [
 33 |       {
 34 |         "count": null,
 35 |         "cursor": null,
 36 |         "direction": "backward",
 37 |         "path": [
 38 |           "allPosts"
 39 |         ]
 40 |       }
 41 |     ]
 42 |   },
 43 |   "argumentDefinitions": [],
 44 |   "selections": [
 45 |     {
 46 |       "kind": "LinkedField",
 47 |       "alias": "allPosts",
 48 |       "name": "__ListPage_allPosts_connection",
 49 |       "storageKey": null,
 50 |       "args": null,
 51 |       "concreteType": "PostConnection",
 52 |       "plural": false,
 53 |       "selections": [
 54 |         {
 55 |           "kind": "LinkedField",
 56 |           "alias": null,
 57 |           "name": "edges",
 58 |           "storageKey": null,
 59 |           "args": null,
 60 |           "concreteType": "PostEdge",
 61 |           "plural": true,
 62 |           "selections": [
 63 |             {
 64 |               "kind": "LinkedField",
 65 |               "alias": null,
 66 |               "name": "node",
 67 |               "storageKey": null,
 68 |               "args": null,
 69 |               "concreteType": "Post",
 70 |               "plural": false,
 71 |               "selections": [
 72 |                 {
 73 |                   "kind": "FragmentSpread",
 74 |                   "name": "Post_post",
 75 |                   "args": null
 76 |                 },
 77 |                 {
 78 |                   "kind": "ScalarField",
 79 |                   "alias": null,
 80 |                   "name": "__typename",
 81 |                   "args": null,
 82 |                   "storageKey": null
 83 |                 }
 84 |               ]
 85 |             },
 86 |             {
 87 |               "kind": "ScalarField",
 88 |               "alias": null,
 89 |               "name": "cursor",
 90 |               "args": null,
 91 |               "storageKey": null
 92 |             }
 93 |           ]
 94 |         },
 95 |         {
 96 |           "kind": "LinkedField",
 97 |           "alias": null,
 98 |           "name": "pageInfo",
 99 |           "storageKey": null,
100 |           "args": null,
101 |           "concreteType": "PageInfo",
102 |           "plural": false,
103 |           "selections": [
104 |             {
105 |               "kind": "ScalarField",
106 |               "alias": null,
107 |               "name": "hasPreviousPage",
108 |               "args": null,
109 |               "storageKey": null
110 |             },
111 |             {
112 |               "kind": "ScalarField",
113 |               "alias": null,
114 |               "name": "startCursor",
115 |               "args": null,
116 |               "storageKey": null
117 |             }
118 |           ]
119 |         }
120 |       ]
121 |     }
122 |   ]
123 | };
124 | // prettier-ignore
125 | (node/*: any*/).hash = 'cab2821ba9eb8179ace9a3f140045518';
126 | module.exports = node;
127 | 


--------------------------------------------------------------------------------
/src/__generated__/DetailQuery.graphql.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @flow
  3 |  * @relayHash 1e9b0c8aa92bcf17401253661de63137
  4 |  */
  5 | 
  6 | /* eslint-disable */
  7 | 
  8 | 'use strict';
  9 | 
 10 | /*::
 11 | import type { ConcreteRequest } from 'relay-runtime';
 12 | export type DetailQueryVariables = {|
 13 |   idTest: string
 14 | |};
 15 | export type DetailQueryResponse = {|
 16 |   +viewer: {|
 17 |     +Post: ?{|
 18 |       +title: string,
 19 |       +imageUrl: string,
 20 |       +description: string,
 21 |       +nickname: ?string,
 22 |       +occupation: ?string,
 23 |     |}
 24 |   |}
 25 | |};
 26 | export type DetailQuery = {|
 27 |   variables: DetailQueryVariables,
 28 |   response: DetailQueryResponse,
 29 | |};
 30 | */
 31 | 
 32 | 
 33 | /*
 34 | query DetailQuery(
 35 |   $idTest: ID!
 36 | ) {
 37 |   viewer {
 38 |     Post(id: $idTest) {
 39 |       title
 40 |       imageUrl
 41 |       description
 42 |       nickname
 43 |       occupation
 44 |       id
 45 |     }
 46 |     id
 47 |   }
 48 | }
 49 | */
 50 | 
 51 | const node/*: ConcreteRequest*/ = (function(){
 52 | var v0 = [
 53 |   {
 54 |     "kind": "LocalArgument",
 55 |     "name": "idTest",
 56 |     "type": "ID!",
 57 |     "defaultValue": null
 58 |   }
 59 | ],
 60 | v1 = [
 61 |   {
 62 |     "kind": "Variable",
 63 |     "name": "id",
 64 |     "variableName": "idTest",
 65 |     "type": "ID"
 66 |   }
 67 | ],
 68 | v2 = {
 69 |   "kind": "ScalarField",
 70 |   "alias": null,
 71 |   "name": "title",
 72 |   "args": null,
 73 |   "storageKey": null
 74 | },
 75 | v3 = {
 76 |   "kind": "ScalarField",
 77 |   "alias": null,
 78 |   "name": "imageUrl",
 79 |   "args": null,
 80 |   "storageKey": null
 81 | },
 82 | v4 = {
 83 |   "kind": "ScalarField",
 84 |   "alias": null,
 85 |   "name": "description",
 86 |   "args": null,
 87 |   "storageKey": null
 88 | },
 89 | v5 = {
 90 |   "kind": "ScalarField",
 91 |   "alias": null,
 92 |   "name": "nickname",
 93 |   "args": null,
 94 |   "storageKey": null
 95 | },
 96 | v6 = {
 97 |   "kind": "ScalarField",
 98 |   "alias": null,
 99 |   "name": "occupation",
100 |   "args": null,
101 |   "storageKey": null
102 | },
103 | v7 = {
104 |   "kind": "ScalarField",
105 |   "alias": null,
106 |   "name": "id",
107 |   "args": null,
108 |   "storageKey": null
109 | };
110 | return {
111 |   "kind": "Request",
112 |   "fragment": {
113 |     "kind": "Fragment",
114 |     "name": "DetailQuery",
115 |     "type": "Query",
116 |     "metadata": null,
117 |     "argumentDefinitions": (v0/*: any*/),
118 |     "selections": [
119 |       {
120 |         "kind": "LinkedField",
121 |         "alias": null,
122 |         "name": "viewer",
123 |         "storageKey": null,
124 |         "args": null,
125 |         "concreteType": "Viewer",
126 |         "plural": false,
127 |         "selections": [
128 |           {
129 |             "kind": "LinkedField",
130 |             "alias": null,
131 |             "name": "Post",
132 |             "storageKey": null,
133 |             "args": (v1/*: any*/),
134 |             "concreteType": "Post",
135 |             "plural": false,
136 |             "selections": [
137 |               (v2/*: any*/),
138 |               (v3/*: any*/),
139 |               (v4/*: any*/),
140 |               (v5/*: any*/),
141 |               (v6/*: any*/)
142 |             ]
143 |           }
144 |         ]
145 |       }
146 |     ]
147 |   },
148 |   "operation": {
149 |     "kind": "Operation",
150 |     "name": "DetailQuery",
151 |     "argumentDefinitions": (v0/*: any*/),
152 |     "selections": [
153 |       {
154 |         "kind": "LinkedField",
155 |         "alias": null,
156 |         "name": "viewer",
157 |         "storageKey": null,
158 |         "args": null,
159 |         "concreteType": "Viewer",
160 |         "plural": false,
161 |         "selections": [
162 |           {
163 |             "kind": "LinkedField",
164 |             "alias": null,
165 |             "name": "Post",
166 |             "storageKey": null,
167 |             "args": (v1/*: any*/),
168 |             "concreteType": "Post",
169 |             "plural": false,
170 |             "selections": [
171 |               (v2/*: any*/),
172 |               (v3/*: any*/),
173 |               (v4/*: any*/),
174 |               (v5/*: any*/),
175 |               (v6/*: any*/),
176 |               (v7/*: any*/)
177 |             ]
178 |           },
179 |           (v7/*: any*/)
180 |         ]
181 |       }
182 |     ]
183 |   },
184 |   "params": {
185 |     "operationKind": "query",
186 |     "name": "DetailQuery",
187 |     "id": null,
188 |     "text": "query DetailQuery(\n  $idTest: ID!\n) {\n  viewer {\n    Post(id: $idTest) {\n      title\n      imageUrl\n      description\n      nickname\n      occupation\n      id\n    }\n    id\n  }\n}\n",
189 |     "metadata": {}
190 |   }
191 | };
192 | })();
193 | // prettier-ignore
194 | (node/*: any*/).hash = '14d6fa287bc642e2703d2ff0bb442378';
195 | module.exports = node;
196 | 


--------------------------------------------------------------------------------
/src/__generated__/HomeQuery.graphql.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @flow
  3 |  * @relayHash 9151cebc2fc154be78ec267ada90a324
  4 |  */
  5 | 
  6 | /* eslint-disable */
  7 | 
  8 | 'use strict';
  9 | 
 10 | /*::
 11 | import type { ConcreteRequest } from 'relay-runtime';
 12 | type ListPage_viewer$ref = any;
 13 | export type HomeQueryVariables = {||};
 14 | export type HomeQueryResponse = {|
 15 |   +viewer: {|
 16 |     +$fragmentRefs: ListPage_viewer$ref
 17 |   |}
 18 | |};
 19 | export type HomeQuery = {|
 20 |   variables: HomeQueryVariables,
 21 |   response: HomeQueryResponse,
 22 | |};
 23 | */
 24 | 
 25 | 
 26 | /*
 27 | query HomeQuery {
 28 |   viewer {
 29 |     ...ListPage_viewer
 30 |     id
 31 |   }
 32 | }
 33 | 
 34 | fragment ListPage_viewer on Viewer {
 35 |   allPosts(last: 100, orderBy: createdAt_ASC) {
 36 |     edges {
 37 |       node {
 38 |         ...Post_post
 39 |         id
 40 |         __typename
 41 |       }
 42 |       cursor
 43 |     }
 44 |     pageInfo {
 45 |       hasPreviousPage
 46 |       startCursor
 47 |     }
 48 |   }
 49 | }
 50 | 
 51 | fragment Post_post on Post {
 52 |   id
 53 |   imageUrl
 54 |   title
 55 |   shortDescription
 56 | }
 57 | */
 58 | 
 59 | const node/*: ConcreteRequest*/ = (function(){
 60 | var v0 = [
 61 |   {
 62 |     "kind": "Literal",
 63 |     "name": "last",
 64 |     "value": 100,
 65 |     "type": "Int"
 66 |   },
 67 |   {
 68 |     "kind": "Literal",
 69 |     "name": "orderBy",
 70 |     "value": "createdAt_ASC",
 71 |     "type": "PostOrderBy"
 72 |   }
 73 | ],
 74 | v1 = {
 75 |   "kind": "ScalarField",
 76 |   "alias": null,
 77 |   "name": "id",
 78 |   "args": null,
 79 |   "storageKey": null
 80 | };
 81 | return {
 82 |   "kind": "Request",
 83 |   "fragment": {
 84 |     "kind": "Fragment",
 85 |     "name": "HomeQuery",
 86 |     "type": "Query",
 87 |     "metadata": null,
 88 |     "argumentDefinitions": [],
 89 |     "selections": [
 90 |       {
 91 |         "kind": "LinkedField",
 92 |         "alias": null,
 93 |         "name": "viewer",
 94 |         "storageKey": null,
 95 |         "args": null,
 96 |         "concreteType": "Viewer",
 97 |         "plural": false,
 98 |         "selections": [
 99 |           {
100 |             "kind": "FragmentSpread",
101 |             "name": "ListPage_viewer",
102 |             "args": null
103 |           }
104 |         ]
105 |       }
106 |     ]
107 |   },
108 |   "operation": {
109 |     "kind": "Operation",
110 |     "name": "HomeQuery",
111 |     "argumentDefinitions": [],
112 |     "selections": [
113 |       {
114 |         "kind": "LinkedField",
115 |         "alias": null,
116 |         "name": "viewer",
117 |         "storageKey": null,
118 |         "args": null,
119 |         "concreteType": "Viewer",
120 |         "plural": false,
121 |         "selections": [
122 |           {
123 |             "kind": "LinkedField",
124 |             "alias": null,
125 |             "name": "allPosts",
126 |             "storageKey": "allPosts(last:100,orderBy:\"createdAt_ASC\")",
127 |             "args": (v0/*: any*/),
128 |             "concreteType": "PostConnection",
129 |             "plural": false,
130 |             "selections": [
131 |               {
132 |                 "kind": "LinkedField",
133 |                 "alias": null,
134 |                 "name": "edges",
135 |                 "storageKey": null,
136 |                 "args": null,
137 |                 "concreteType": "PostEdge",
138 |                 "plural": true,
139 |                 "selections": [
140 |                   {
141 |                     "kind": "LinkedField",
142 |                     "alias": null,
143 |                     "name": "node",
144 |                     "storageKey": null,
145 |                     "args": null,
146 |                     "concreteType": "Post",
147 |                     "plural": false,
148 |                     "selections": [
149 |                       (v1/*: any*/),
150 |                       {
151 |                         "kind": "ScalarField",
152 |                         "alias": null,
153 |                         "name": "imageUrl",
154 |                         "args": null,
155 |                         "storageKey": null
156 |                       },
157 |                       {
158 |                         "kind": "ScalarField",
159 |                         "alias": null,
160 |                         "name": "title",
161 |                         "args": null,
162 |                         "storageKey": null
163 |                       },
164 |                       {
165 |                         "kind": "ScalarField",
166 |                         "alias": null,
167 |                         "name": "shortDescription",
168 |                         "args": null,
169 |                         "storageKey": null
170 |                       },
171 |                       {
172 |                         "kind": "ScalarField",
173 |                         "alias": null,
174 |                         "name": "__typename",
175 |                         "args": null,
176 |                         "storageKey": null
177 |                       }
178 |                     ]
179 |                   },
180 |                   {
181 |                     "kind": "ScalarField",
182 |                     "alias": null,
183 |                     "name": "cursor",
184 |                     "args": null,
185 |                     "storageKey": null
186 |                   }
187 |                 ]
188 |               },
189 |               {
190 |                 "kind": "LinkedField",
191 |                 "alias": null,
192 |                 "name": "pageInfo",
193 |                 "storageKey": null,
194 |                 "args": null,
195 |                 "concreteType": "PageInfo",
196 |                 "plural": false,
197 |                 "selections": [
198 |                   {
199 |                     "kind": "ScalarField",
200 |                     "alias": null,
201 |                     "name": "hasPreviousPage",
202 |                     "args": null,
203 |                     "storageKey": null
204 |                   },
205 |                   {
206 |                     "kind": "ScalarField",
207 |                     "alias": null,
208 |                     "name": "startCursor",
209 |                     "args": null,
210 |                     "storageKey": null
211 |                   }
212 |                 ]
213 |               }
214 |             ]
215 |           },
216 |           {
217 |             "kind": "LinkedHandle",
218 |             "alias": null,
219 |             "name": "allPosts",
220 |             "args": (v0/*: any*/),
221 |             "handle": "connection",
222 |             "key": "ListPage_allPosts",
223 |             "filters": []
224 |           },
225 |           (v1/*: any*/)
226 |         ]
227 |       }
228 |     ]
229 |   },
230 |   "params": {
231 |     "operationKind": "query",
232 |     "name": "HomeQuery",
233 |     "id": null,
234 |     "text": "query HomeQuery {\n  viewer {\n    ...ListPage_viewer\n    id\n  }\n}\n\nfragment ListPage_viewer on Viewer {\n  allPosts(last: 100, orderBy: createdAt_ASC) {\n    edges {\n      node {\n        ...Post_post\n        id\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      hasPreviousPage\n      startCursor\n    }\n  }\n}\n\nfragment Post_post on Post {\n  id\n  imageUrl\n  title\n  shortDescription\n}\n",
235 |     "metadata": {}
236 |   }
237 | };
238 | })();
239 | // prettier-ignore
240 | (node/*: any*/).hash = '0708e3e650b50d82732154ec3caf617e';
241 | module.exports = node;
242 | 


--------------------------------------------------------------------------------
/schema.graphql:
--------------------------------------------------------------------------------
  1 | input CreatePost {
  2 |   description: String!
  3 |   imageUrl: String!
  4 |   nickname: String
  5 |   occupation: String
  6 |   shortDescription: String
  7 |   title: String!
  8 | }
  9 | 
 10 | input CreatePostInput {
 11 |   description: String!
 12 |   imageUrl: String!
 13 |   nickname: String
 14 |   occupation: String
 15 |   shortDescription: String
 16 |   title: String!
 17 |   clientMutationId: String!
 18 | }
 19 | 
 20 | type CreatePostPayload {
 21 |   viewer: Viewer!
 22 |   clientMutationId: String!
 23 |   post: Post
 24 |   edge: PostEdge
 25 | }
 26 | 
 27 | input CreateUser {
 28 |   dateOfBirth: DateTime
 29 |   name: String
 30 | }
 31 | 
 32 | """
 33 | If authentication was successful the payload contains the user and a token. If unsuccessful this payload is null.
 34 | """
 35 | type CreateUserPayload {
 36 |   user: User
 37 |   clientMutationId: String
 38 |   viewer: Viewer!
 39 | }
 40 | 
 41 | scalar DateTime
 42 | 
 43 | input DeletePostInput {
 44 |   id: ID!
 45 |   clientMutationId: String!
 46 | }
 47 | 
 48 | type DeletePostPayload {
 49 |   viewer: Viewer!
 50 |   clientMutationId: String!
 51 |   post: Post
 52 |   edge: PostEdge
 53 |   deletedId: ID
 54 | }
 55 | 
 56 | input DeleteUserInput {
 57 |   id: ID!
 58 |   clientMutationId: String!
 59 | }
 60 | 
 61 | type DeleteUserPayload {
 62 |   viewer: Viewer!
 63 |   clientMutationId: String!
 64 |   user: User
 65 |   edge: UserEdge
 66 |   deletedId: ID
 67 | }
 68 | 
 69 | """HelloPayload"""
 70 | type HelloPayload {
 71 |   message: String!
 72 | }
 73 | 
 74 | input InvokeFunctionInput {
 75 |   name: String!
 76 |   input: String!
 77 |   clientMutationId: String
 78 | }
 79 | 
 80 | type InvokeFunctionPayload {
 81 |   result: String!
 82 |   clientMutationId: String
 83 | }
 84 | 
 85 | type Mutation {
 86 |   createPost(input: CreatePostInput!): CreatePostPayload
 87 |   updatePost(input: UpdatePostInput!): UpdatePostPayload
 88 |   updateUser(input: UpdateUserInput!): UpdateUserPayload
 89 |   updateOrCreatePost(input: UpdateOrCreatePostInput!): UpdateOrCreatePostPayload
 90 |   updateOrCreateUser(input: UpdateOrCreateUserInput!): UpdateOrCreateUserPayload
 91 |   deletePost(input: DeletePostInput!): DeletePostPayload
 92 |   deleteUser(input: DeleteUserInput!): DeleteUserPayload
 93 |   createUser(input: SignupUserInput!): CreateUserPayload!
 94 |   invokeFunction(input: InvokeFunctionInput!): InvokeFunctionPayload
 95 | }
 96 | 
 97 | """An object with an ID"""
 98 | interface Node {
 99 |   """The id of the object."""
100 |   id: ID!
101 | }
102 | 
103 | """Information about pagination in a connection."""
104 | type PageInfo {
105 |   """When paginating forwards, are there more items?"""
106 |   hasNextPage: Boolean!
107 | 
108 |   """When paginating backwards, are there more items?"""
109 |   hasPreviousPage: Boolean!
110 | 
111 |   """When paginating backwards, the cursor to continue."""
112 |   startCursor: String
113 | 
114 |   """When paginating forwards, the cursor to continue."""
115 |   endCursor: String
116 | }
117 | 
118 | type Post implements Node {
119 |   createdAt: DateTime!
120 |   description: String!
121 |   id: ID!
122 |   imageUrl: String!
123 |   nickname: String
124 |   occupation: String
125 |   shortDescription: String
126 |   title: String!
127 |   updatedAt: DateTime!
128 | }
129 | 
130 | """A connection to a list of items."""
131 | type PostConnection {
132 |   """Information to aid in pagination."""
133 |   pageInfo: PageInfo!
134 | 
135 |   """A list of edges."""
136 |   edges: [PostEdge]
137 | 
138 |   """Count of filtered result set without considering pagination arguments"""
139 |   count: Int!
140 | }
141 | 
142 | """An edge in a connection."""
143 | type PostEdge {
144 |   """The item at the end of the edge."""
145 |   node: Post!
146 | 
147 |   """A cursor for use in pagination."""
148 |   cursor: String!
149 | }
150 | 
151 | input PostFilter {
152 |   """Logical AND on all given filters."""
153 |   AND: [PostFilter!]
154 | 
155 |   """Logical OR on all given filters."""
156 |   OR: [PostFilter!]
157 |   createdAt: DateTime
158 | 
159 |   """All values that are not equal to given value."""
160 |   createdAt_not: DateTime
161 | 
162 |   """All values that are contained in given list."""
163 |   createdAt_in: [DateTime!]
164 | 
165 |   """All values that are not contained in given list."""
166 |   createdAt_not_in: [DateTime!]
167 | 
168 |   """All values less than the given value."""
169 |   createdAt_lt: DateTime
170 | 
171 |   """All values less than or equal the given value."""
172 |   createdAt_lte: DateTime
173 | 
174 |   """All values greater than the given value."""
175 |   createdAt_gt: DateTime
176 | 
177 |   """All values greater than or equal the given value."""
178 |   createdAt_gte: DateTime
179 |   description: String
180 | 
181 |   """All values that are not equal to given value."""
182 |   description_not: String
183 | 
184 |   """All values that are contained in given list."""
185 |   description_in: [String!]
186 | 
187 |   """All values that are not contained in given list."""
188 |   description_not_in: [String!]
189 | 
190 |   """All values less than the given value."""
191 |   description_lt: String
192 | 
193 |   """All values less than or equal the given value."""
194 |   description_lte: String
195 | 
196 |   """All values greater than the given value."""
197 |   description_gt: String
198 | 
199 |   """All values greater than or equal the given value."""
200 |   description_gte: String
201 | 
202 |   """All values containing the given string."""
203 |   description_contains: String
204 | 
205 |   """All values not containing the given string."""
206 |   description_not_contains: String
207 | 
208 |   """All values starting with the given string."""
209 |   description_starts_with: String
210 | 
211 |   """All values not starting with the given string."""
212 |   description_not_starts_with: String
213 | 
214 |   """All values ending with the given string."""
215 |   description_ends_with: String
216 | 
217 |   """All values not ending with the given string."""
218 |   description_not_ends_with: String
219 |   id: ID
220 | 
221 |   """All values that are not equal to given value."""
222 |   id_not: ID
223 | 
224 |   """All values that are contained in given list."""
225 |   id_in: [ID!]
226 | 
227 |   """All values that are not contained in given list."""
228 |   id_not_in: [ID!]
229 | 
230 |   """All values less than the given value."""
231 |   id_lt: ID
232 | 
233 |   """All values less than or equal the given value."""
234 |   id_lte: ID
235 | 
236 |   """All values greater than the given value."""
237 |   id_gt: ID
238 | 
239 |   """All values greater than or equal the given value."""
240 |   id_gte: ID
241 | 
242 |   """All values containing the given string."""
243 |   id_contains: ID
244 | 
245 |   """All values not containing the given string."""
246 |   id_not_contains: ID
247 | 
248 |   """All values starting with the given string."""
249 |   id_starts_with: ID
250 | 
251 |   """All values not starting with the given string."""
252 |   id_not_starts_with: ID
253 | 
254 |   """All values ending with the given string."""
255 |   id_ends_with: ID
256 | 
257 |   """All values not ending with the given string."""
258 |   id_not_ends_with: ID
259 |   imageUrl: String
260 | 
261 |   """All values that are not equal to given value."""
262 |   imageUrl_not: String
263 | 
264 |   """All values that are contained in given list."""
265 |   imageUrl_in: [String!]
266 | 
267 |   """All values that are not contained in given list."""
268 |   imageUrl_not_in: [String!]
269 | 
270 |   """All values less than the given value."""
271 |   imageUrl_lt: String
272 | 
273 |   """All values less than or equal the given value."""
274 |   imageUrl_lte: String
275 | 
276 |   """All values greater than the given value."""
277 |   imageUrl_gt: String
278 | 
279 |   """All values greater than or equal the given value."""
280 |   imageUrl_gte: String
281 | 
282 |   """All values containing the given string."""
283 |   imageUrl_contains: String
284 | 
285 |   """All values not containing the given string."""
286 |   imageUrl_not_contains: String
287 | 
288 |   """All values starting with the given string."""
289 |   imageUrl_starts_with: String
290 | 
291 |   """All values not starting with the given string."""
292 |   imageUrl_not_starts_with: String
293 | 
294 |   """All values ending with the given string."""
295 |   imageUrl_ends_with: String
296 | 
297 |   """All values not ending with the given string."""
298 |   imageUrl_not_ends_with: String
299 |   nickname: String
300 | 
301 |   """All values that are not equal to given value."""
302 |   nickname_not: String
303 | 
304 |   """All values that are contained in given list."""
305 |   nickname_in: [String!]
306 | 
307 |   """All values that are not contained in given list."""
308 |   nickname_not_in: [String!]
309 | 
310 |   """All values less than the given value."""
311 |   nickname_lt: String
312 | 
313 |   """All values less than or equal the given value."""
314 |   nickname_lte: String
315 | 
316 |   """All values greater than the given value."""
317 |   nickname_gt: String
318 | 
319 |   """All values greater than or equal the given value."""
320 |   nickname_gte: String
321 | 
322 |   """All values containing the given string."""
323 |   nickname_contains: String
324 | 
325 |   """All values not containing the given string."""
326 |   nickname_not_contains: String
327 | 
328 |   """All values starting with the given string."""
329 |   nickname_starts_with: String
330 | 
331 |   """All values not starting with the given string."""
332 |   nickname_not_starts_with: String
333 | 
334 |   """All values ending with the given string."""
335 |   nickname_ends_with: String
336 | 
337 |   """All values not ending with the given string."""
338 |   nickname_not_ends_with: String
339 |   occupation: String
340 | 
341 |   """All values that are not equal to given value."""
342 |   occupation_not: String
343 | 
344 |   """All values that are contained in given list."""
345 |   occupation_in: [String!]
346 | 
347 |   """All values that are not contained in given list."""
348 |   occupation_not_in: [String!]
349 | 
350 |   """All values less than the given value."""
351 |   occupation_lt: String
352 | 
353 |   """All values less than or equal the given value."""
354 |   occupation_lte: String
355 | 
356 |   """All values greater than the given value."""
357 |   occupation_gt: String
358 | 
359 |   """All values greater than or equal the given value."""
360 |   occupation_gte: String
361 | 
362 |   """All values containing the given string."""
363 |   occupation_contains: String
364 | 
365 |   """All values not containing the given string."""
366 |   occupation_not_contains: String
367 | 
368 |   """All values starting with the given string."""
369 |   occupation_starts_with: String
370 | 
371 |   """All values not starting with the given string."""
372 |   occupation_not_starts_with: String
373 | 
374 |   """All values ending with the given string."""
375 |   occupation_ends_with: String
376 | 
377 |   """All values not ending with the given string."""
378 |   occupation_not_ends_with: String
379 |   shortDescription: String
380 | 
381 |   """All values that are not equal to given value."""
382 |   shortDescription_not: String
383 | 
384 |   """All values that are contained in given list."""
385 |   shortDescription_in: [String!]
386 | 
387 |   """All values that are not contained in given list."""
388 |   shortDescription_not_in: [String!]
389 | 
390 |   """All values less than the given value."""
391 |   shortDescription_lt: String
392 | 
393 |   """All values less than or equal the given value."""
394 |   shortDescription_lte: String
395 | 
396 |   """All values greater than the given value."""
397 |   shortDescription_gt: String
398 | 
399 |   """All values greater than or equal the given value."""
400 |   shortDescription_gte: String
401 | 
402 |   """All values containing the given string."""
403 |   shortDescription_contains: String
404 | 
405 |   """All values not containing the given string."""
406 |   shortDescription_not_contains: String
407 | 
408 |   """All values starting with the given string."""
409 |   shortDescription_starts_with: String
410 | 
411 |   """All values not starting with the given string."""
412 |   shortDescription_not_starts_with: String
413 | 
414 |   """All values ending with the given string."""
415 |   shortDescription_ends_with: String
416 | 
417 |   """All values not ending with the given string."""
418 |   shortDescription_not_ends_with: String
419 |   title: String
420 | 
421 |   """All values that are not equal to given value."""
422 |   title_not: String
423 | 
424 |   """All values that are contained in given list."""
425 |   title_in: [String!]
426 | 
427 |   """All values that are not contained in given list."""
428 |   title_not_in: [String!]
429 | 
430 |   """All values less than the given value."""
431 |   title_lt: String
432 | 
433 |   """All values less than or equal the given value."""
434 |   title_lte: String
435 | 
436 |   """All values greater than the given value."""
437 |   title_gt: String
438 | 
439 |   """All values greater than or equal the given value."""
440 |   title_gte: String
441 | 
442 |   """All values containing the given string."""
443 |   title_contains: String
444 | 
445 |   """All values not containing the given string."""
446 |   title_not_contains: String
447 | 
448 |   """All values starting with the given string."""
449 |   title_starts_with: String
450 | 
451 |   """All values not starting with the given string."""
452 |   title_not_starts_with: String
453 | 
454 |   """All values ending with the given string."""
455 |   title_ends_with: String
456 | 
457 |   """All values not ending with the given string."""
458 |   title_not_ends_with: String
459 |   updatedAt: DateTime
460 | 
461 |   """All values that are not equal to given value."""
462 |   updatedAt_not: DateTime
463 | 
464 |   """All values that are contained in given list."""
465 |   updatedAt_in: [DateTime!]
466 | 
467 |   """All values that are not contained in given list."""
468 |   updatedAt_not_in: [DateTime!]
469 | 
470 |   """All values less than the given value."""
471 |   updatedAt_lt: DateTime
472 | 
473 |   """All values less than or equal the given value."""
474 |   updatedAt_lte: DateTime
475 | 
476 |   """All values greater than the given value."""
477 |   updatedAt_gt: DateTime
478 | 
479 |   """All values greater than or equal the given value."""
480 |   updatedAt_gte: DateTime
481 | }
482 | 
483 | enum PostOrderBy {
484 |   createdAt_ASC
485 |   createdAt_DESC
486 |   description_ASC
487 |   description_DESC
488 |   id_ASC
489 |   id_DESC
490 |   imageUrl_ASC
491 |   imageUrl_DESC
492 |   nickname_ASC
493 |   nickname_DESC
494 |   occupation_ASC
495 |   occupation_DESC
496 |   shortDescription_ASC
497 |   shortDescription_DESC
498 |   title_ASC
499 |   title_DESC
500 |   updatedAt_ASC
501 |   updatedAt_DESC
502 | }
503 | 
504 | type Query {
505 |   viewer: Viewer!
506 | 
507 |   """Fetches an object given its ID"""
508 |   node(
509 |     """The ID of an object"""
510 |     id: ID!
511 |   ): Node
512 | }
513 | 
514 | input SignupUserInput {
515 |   dateOfBirth: DateTime
516 |   name: String
517 |   clientMutationId: String!
518 | }
519 | 
520 | input UpdateOrCreatePostInput {
521 |   update: UpdatePost!
522 |   create: CreatePost!
523 |   clientMutationId: String!
524 | }
525 | 
526 | type UpdateOrCreatePostPayload {
527 |   viewer: Viewer!
528 |   clientMutationId: String!
529 |   post: Post
530 |   edge: PostEdge
531 | }
532 | 
533 | input UpdateOrCreateUserInput {
534 |   update: UpdateUser!
535 |   create: CreateUser!
536 |   clientMutationId: String!
537 | }
538 | 
539 | type UpdateOrCreateUserPayload {
540 |   viewer: Viewer!
541 |   clientMutationId: String!
542 |   user: User
543 |   edge: UserEdge
544 | }
545 | 
546 | input UpdatePost {
547 |   description: String
548 |   id: ID!
549 |   imageUrl: String
550 |   nickname: String
551 |   occupation: String
552 |   shortDescription: String
553 |   title: String
554 | }
555 | 
556 | input UpdatePostInput {
557 |   description: String
558 |   id: ID!
559 |   imageUrl: String
560 |   nickname: String
561 |   occupation: String
562 |   shortDescription: String
563 |   title: String
564 |   clientMutationId: String!
565 | }
566 | 
567 | type UpdatePostPayload {
568 |   viewer: Viewer!
569 |   clientMutationId: String!
570 |   post: Post
571 |   edge: PostEdge
572 | }
573 | 
574 | input UpdateUser {
575 |   dateOfBirth: DateTime
576 |   id: ID!
577 |   name: String
578 | }
579 | 
580 | input UpdateUserInput {
581 |   dateOfBirth: DateTime
582 |   id: ID!
583 |   name: String
584 |   clientMutationId: String!
585 | }
586 | 
587 | type UpdateUserPayload {
588 |   viewer: Viewer!
589 |   clientMutationId: String!
590 |   user: User
591 |   edge: UserEdge
592 | }
593 | 
594 | type User implements Node {
595 |   dateOfBirth: DateTime
596 |   id: ID!
597 |   name: String
598 | }
599 | 
600 | """A connection to a list of items."""
601 | type UserConnection {
602 |   """Information to aid in pagination."""
603 |   pageInfo: PageInfo!
604 | 
605 |   """A list of edges."""
606 |   edges: [UserEdge]
607 | 
608 |   """Count of filtered result set without considering pagination arguments"""
609 |   count: Int!
610 | }
611 | 
612 | """An edge in a connection."""
613 | type UserEdge {
614 |   """The item at the end of the edge."""
615 |   node: User!
616 | 
617 |   """A cursor for use in pagination."""
618 |   cursor: String!
619 | }
620 | 
621 | input UserFilter {
622 |   """Logical AND on all given filters."""
623 |   AND: [UserFilter!]
624 | 
625 |   """Logical OR on all given filters."""
626 |   OR: [UserFilter!]
627 |   dateOfBirth: DateTime
628 | 
629 |   """All values that are not equal to given value."""
630 |   dateOfBirth_not: DateTime
631 | 
632 |   """All values that are contained in given list."""
633 |   dateOfBirth_in: [DateTime!]
634 | 
635 |   """All values that are not contained in given list."""
636 |   dateOfBirth_not_in: [DateTime!]
637 | 
638 |   """All values less than the given value."""
639 |   dateOfBirth_lt: DateTime
640 | 
641 |   """All values less than or equal the given value."""
642 |   dateOfBirth_lte: DateTime
643 | 
644 |   """All values greater than the given value."""
645 |   dateOfBirth_gt: DateTime
646 | 
647 |   """All values greater than or equal the given value."""
648 |   dateOfBirth_gte: DateTime
649 |   id: ID
650 | 
651 |   """All values that are not equal to given value."""
652 |   id_not: ID
653 | 
654 |   """All values that are contained in given list."""
655 |   id_in: [ID!]
656 | 
657 |   """All values that are not contained in given list."""
658 |   id_not_in: [ID!]
659 | 
660 |   """All values less than the given value."""
661 |   id_lt: ID
662 | 
663 |   """All values less than or equal the given value."""
664 |   id_lte: ID
665 | 
666 |   """All values greater than the given value."""
667 |   id_gt: ID
668 | 
669 |   """All values greater than or equal the given value."""
670 |   id_gte: ID
671 | 
672 |   """All values containing the given string."""
673 |   id_contains: ID
674 | 
675 |   """All values not containing the given string."""
676 |   id_not_contains: ID
677 | 
678 |   """All values starting with the given string."""
679 |   id_starts_with: ID
680 | 
681 |   """All values not starting with the given string."""
682 |   id_not_starts_with: ID
683 | 
684 |   """All values ending with the given string."""
685 |   id_ends_with: ID
686 | 
687 |   """All values not ending with the given string."""
688 |   id_not_ends_with: ID
689 |   name: String
690 | 
691 |   """All values that are not equal to given value."""
692 |   name_not: String
693 | 
694 |   """All values that are contained in given list."""
695 |   name_in: [String!]
696 | 
697 |   """All values that are not contained in given list."""
698 |   name_not_in: [String!]
699 | 
700 |   """All values less than the given value."""
701 |   name_lt: String
702 | 
703 |   """All values less than or equal the given value."""
704 |   name_lte: String
705 | 
706 |   """All values greater than the given value."""
707 |   name_gt: String
708 | 
709 |   """All values greater than or equal the given value."""
710 |   name_gte: String
711 | 
712 |   """All values containing the given string."""
713 |   name_contains: String
714 | 
715 |   """All values not containing the given string."""
716 |   name_not_contains: String
717 | 
718 |   """All values starting with the given string."""
719 |   name_starts_with: String
720 | 
721 |   """All values not starting with the given string."""
722 |   name_not_starts_with: String
723 | 
724 |   """All values ending with the given string."""
725 |   name_ends_with: String
726 | 
727 |   """All values not ending with the given string."""
728 |   name_not_ends_with: String
729 | }
730 | 
731 | enum UserOrderBy {
732 |   dateOfBirth_ASC
733 |   dateOfBirth_DESC
734 |   id_ASC
735 |   id_DESC
736 |   name_ASC
737 |   name_DESC
738 | }
739 | 
740 | """This is the famous Relay viewer object"""
741 | type Viewer {
742 |   allPosts(filter: PostFilter, orderBy: PostOrderBy, skip: Int, after: String, before: String, first: Int, last: Int): PostConnection!
743 |   allUsers(filter: UserFilter, orderBy: UserOrderBy, skip: Int, after: String, before: String, first: Int, last: Int): UserConnection!
744 |   user: User
745 |   Post(id: ID): Post
746 |   User(id: ID): User
747 | 
748 |   """hello"""
749 |   hello(name: String): HelloPayload
750 |   id: ID!
751 | }
752 | 
753 | 


--------------------------------------------------------------------------------