├── .gitignore
├── README.md
├── backend
├── Dockerfile
├── README.md
├── generated
│ └── nexus-typegen.ts
├── package-lock.json
├── package.json
├── prisma
│ ├── Dockerfile
│ ├── project.prisma
│ └── seed.ts
├── src
│ ├── index.ts
│ ├── schema.graphql
│ └── types.ts
└── tsconfig.json
├── docker-compose.yml
├── frontend
├── Dockerfile
├── README.md
├── codegen.yml
├── components
│ ├── delete-post.tsx
│ ├── feed.tsx
│ ├── main-layout.tsx
│ ├── new-draft.tsx
│ ├── publish-draft.tsx
│ ├── signup-user.tsx
│ └── users.tsx
├── generated
│ └── apollo-components.tsx
├── graphql
│ ├── fragments
│ │ ├── post.gql
│ │ └── user.gql
│ ├── mutations
│ │ ├── createDraft.gql
│ │ ├── deleteOnePost.gql
│ │ ├── publish.gql
│ │ └── signupUser.gql
│ └── queries
│ │ ├── feed.gql
│ │ ├── post.gql
│ │ └── users.gql
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── _app.jsx
│ └── index.tsx
├── tsconfig.json
└── utils
│ ├── init-apollo.js
│ └── with-apollo-client.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 |
20 | # node-waf configuration
21 | .lock-wscript
22 |
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 |
26 | # Dependency directory
27 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
28 | node_modules
29 |
30 | .DS_Store
31 | .next/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | docker-prisma2
2 |
--------------------------------------------------------------------------------
/backend/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:10.16.0
2 | RUN npm install -g --unsafe-perm prisma2
3 |
4 | RUN mkdir /app
5 | WORKDIR /app
6 |
7 | COPY package*.json ./
8 | COPY prisma ./prisma/
9 |
10 | RUN npm install
11 | RUN prisma2 generate
12 |
13 |
14 | CMD [ "npm", "start" ]
--------------------------------------------------------------------------------
/backend/README.md:
--------------------------------------------------------------------------------
1 | # GraphQL Server Example
2 |
3 | This example shows how to implement a **GraphQL server with TypeScript** based on [Photon JS](https://photonjs.prisma.io/), [graphql-yoga](https://github.com/prisma/graphql-yoga) and [GraphQL Nexus](https://nexus.js.org/).
4 |
5 | ## How to use
6 |
7 | ### 1. Download example & install dependencies
8 |
9 | Clone the repository:
10 |
11 | ```
12 | git clone git@github.com:prisma/photonjs.git
13 | ```
14 |
15 | Install Node dependencies:
16 |
17 | ```
18 | cd photonjs/examples/typescript/graphql
19 | npm install
20 | ```
21 |
22 | ### 2. Install the Prisma 2 CLI
23 |
24 | To run the example, you need the [Prisma 2 CLI](https://github.com/prisma/prisma2-docs/blob/master/prisma-2-cli.md):
25 |
26 | ```
27 | npm install -g prisma2
28 | ```
29 |
30 | ### 3. Set up database
31 |
32 | For this example, you'll use a simple [SQLite database](https://www.sqlite.org/index.html). To set up your database, run:
33 |
34 | ```
35 | prisma2 lift save --name 'init'
36 | prisma2 lift up
37 | ```
38 |
39 | You can now use the [SQLite Browser](https://sqlitebrowser.org/) to view and edit your data in the `./prisma/dev.db` file that was created when you ran `prisma2 lift up`.
40 |
41 | ### 4. Generate Photon (type-safe database client)
42 |
43 | Run the following command to generate [Photon JS](https://photonjs.prisma.io/):
44 |
45 | ```
46 | prisma2 generate
47 | ```
48 |
49 | Now you can seed your database using the `seed` script from `package.json`:
50 |
51 | ```
52 | npm run seed
53 | ```
54 |
55 | ### 5. Start the GraphQL server
56 |
57 | Launch your GraphQL server with this command:
58 |
59 | ```
60 | npm run start
61 | ```
62 |
63 | Navigate to [http://localhost:4000](http://localhost:4000) in your browser to explore the API of your GraphQL server in a [GraphQL Playground](https://github.com/prisma/graphql-playground).
64 |
65 | ### 6. Using the GraphQL API
66 |
67 | The schema that specifies the API operations of your GraphQL server is defined in [`./src/schema.graphql`](./src/schema.graphql). Below are a number of operations that you can send to the API using the GraphQL Playground.
68 |
69 | Feel free to adjust any operation by adding or removing fields. The GraphQL Playground helps you with its auto-completion and query validation features.
70 |
71 | #### Retrieve all published posts and their authors
72 |
73 | ```graphql
74 | query {
75 | feed {
76 | id
77 | title
78 | content
79 | published
80 | author {
81 | id
82 | name
83 | email
84 | }
85 | }
86 | }
87 | ```
88 |
89 | See more API operations
90 |
91 | #### Create a new user
92 |
93 | ```graphql
94 | mutation {
95 | signupUser(
96 | name: "Sarah"
97 | email: "sarah@prisma.io"
98 | ) {
99 | id
100 | }
101 | }
102 | ```
103 |
104 | #### Create a new draft
105 |
106 | ```graphql
107 | mutation {
108 | createDraft(
109 | title: "Join the Prisma Slack"
110 | content: "https://slack.prisma.io"
111 | authorEmail: "alice@prisma.io"
112 | ) {
113 | id
114 | published
115 | }
116 | }
117 | ```
118 |
119 | #### Publish an existing draft
120 |
121 | ```graphql
122 | mutation {
123 | publish(id: "__POST_ID__") {
124 | id
125 | published
126 | }
127 | }
128 | ```
129 |
130 | > **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.
131 |
132 | #### Search for posts with a specific title or content
133 |
134 | ```graphql
135 | {
136 | filterPosts(searchString: "graphql") {
137 | id
138 | title
139 | content
140 | published
141 | author {
142 | id
143 | name
144 | email
145 | }
146 | }
147 | }
148 | ```
149 |
150 | #### Retrieve a single post
151 |
152 | ```graphql
153 | {
154 | post(id: "__POST_ID__") {
155 | id
156 | title
157 | content
158 | published
159 | author {
160 | id
161 | name
162 | email
163 | }
164 | }
165 | }
166 | ```
167 |
168 | > **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.
169 |
170 | #### Delete a post
171 |
172 | ```graphql
173 | mutation {
174 | deletePost(id: "__POST_ID__") {
175 | id
176 | }
177 | }
178 | ```
179 |
180 | > **Note**: You need to replace the `__POST_ID__`-placeholder with an actual `id` from a `Post` item. You can find one e.g. using the `filterPosts`-query.
181 |
182 | Loading...
;
18 | if (error) return Error
;
19 |
20 | if (data && 'feed' in data && data.feed.length > 0) {
21 | const feedData = data.feed.map(({ id, title, content }, i) => ({
22 | key: i,
23 | title,
24 | content,
25 | id
26 | }));
27 | const columns = [
28 | {
29 | title: 'Title',
30 | dataIndex: 'title',
31 | key: 'title'
32 | },
33 | {
34 | title: 'Content',
35 | dataIndex: 'content',
36 | key: 'content'
37 | },
38 | {
39 | title: 'Action',
40 | key: 'action',
41 | render: ({ id }: { id: string }) => {
42 | return (
43 |
44 | {published ? null : }
45 |
46 |
47 | );
48 | }
49 | }
50 | ];
51 | return ;
52 | }
53 |
54 | return No results yet.
;
55 | }}
56 |
57 | );
58 | }
59 | }
60 |
61 | export default FeedList;
62 |
--------------------------------------------------------------------------------
/frontend/components/main-layout.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode, Component } from 'react';
2 | import { Layout } from 'antd';
3 | import Link from 'next/link';
4 | import Head from 'next/head';
5 |
6 | const { Footer, Header, Content } = Layout;
7 |
8 | type Props = {
9 | title?: string;
10 | children: ReactNode;
11 | };
12 |
13 | class MainLayout extends Component {
14 | render() {
15 | const { children, title } = this.props;
16 | return (
17 |
18 |
19 | {title}
20 |
21 |
22 |
23 |
24 |
29 |
30 | {children}
31 |
35 |
36 | );
37 | }
38 | }
39 |
40 | export default MainLayout;
41 |
--------------------------------------------------------------------------------
/frontend/components/new-draft.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Row, Col, Button, Form, Input } from 'antd';
3 | import { CreateDraftMutationComponent, FeedQueryDocument } from '../generated/apollo-components';
4 |
5 | type Props = {};
6 | const initialState = { title: '', content: '', authorEmail: '' };
7 | type State = typeof initialState;
8 |
9 | class NewDraft extends React.Component {
10 | state: State = initialState;
11 |
12 | handleChange = (event: React.ChangeEvent) => {
13 | const { name, value } = event.target;
14 | this.setState({ [name]: value });
15 | };
16 |
17 | render() {
18 | return (
19 |
20 | {createDraft => (
21 |
65 | )}
66 |
67 | );
68 | }
69 | }
70 |
71 | export default NewDraft;
72 |
--------------------------------------------------------------------------------
/frontend/components/publish-draft.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'antd';
3 | import { PublishMutationComponent, FeedQueryDocument } from '../generated/apollo-components';
4 |
5 | type Props = {
6 | id: string;
7 | };
8 |
9 | class PublishDraft extends React.Component {
10 | render() {
11 | const { id } = this.props;
12 | return (
13 |
14 | {publishDraft => (
15 |
28 | )}
29 |
30 | );
31 | }
32 | }
33 |
34 | export default PublishDraft;
35 |
--------------------------------------------------------------------------------
/frontend/components/signup-user.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Row, Col, Button, Form, Input } from 'antd';
3 | import { SignupUserMutationComponent, UsersQueryDocument } from '../generated/apollo-components';
4 |
5 | type Props = {};
6 | const initialState = { name: '', email: '' };
7 | type State = typeof initialState;
8 |
9 | class SignupUser extends React.Component {
10 | state: State = initialState;
11 |
12 | handleChange = (event: React.ChangeEvent) => {
13 | const { name, value } = event.target;
14 | this.setState({ [name]: value });
15 | };
16 |
17 | render() {
18 | return (
19 |
20 | {createUser => (
21 |
50 | )}
51 |
52 | );
53 | }
54 | }
55 |
56 | export default SignupUser;
57 |
--------------------------------------------------------------------------------
/frontend/components/users.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Table } from 'antd';
3 | import { UsersQueryComponent } from '../generated/apollo-components';
4 |
5 | type Props = {};
6 |
7 | class UsersList extends React.PureComponent {
8 | render() {
9 | return (
10 |
11 | {({ loading, error, data }) => {
12 | if (loading) return Loading...
;
13 | if (error) return Error
;
14 |
15 | if (data && 'users' in data && data.users.length > 0) {
16 | const feedData = data.users.map(({ name, email }, i) => ({
17 | key: i,
18 | name,
19 | email
20 | }));
21 | const columns = [
22 | {
23 | title: 'Name',
24 | dataIndex: 'name',
25 | key: 'name'
26 | },
27 | {
28 | title: 'Email',
29 | dataIndex: 'email',
30 | key: 'email'
31 | }
32 | ];
33 | return ;
34 | }
35 |
36 | return No users yet.
;
37 | }}
38 |
39 | );
40 | }
41 | }
42 |
43 | export default UsersList;
44 |
--------------------------------------------------------------------------------
/frontend/generated/apollo-components.tsx:
--------------------------------------------------------------------------------
1 | import gql from "graphql-tag";
2 | import * as ReactApollo from "react-apollo";
3 | import * as React from "react";
4 | export type Maybe = T | null;
5 | export type Omit = Pick>;
6 | /** All built-in and custom scalars, mapped to their actual values */
7 | export type Scalars = {
8 | ID: string;
9 | String: string;
10 | Boolean: boolean;
11 | Int: number;
12 | Float: number;
13 | /** DateTime */
14 | DateTime: any;
15 | };
16 |
17 | export type Mutation = {
18 | __typename?: "Mutation";
19 | signupUser: User;
20 | deleteOnePost?: Maybe;
21 | createDraft: Post;
22 | publish?: Maybe;
23 | };
24 |
25 | export type MutationSignupUserArgs = {
26 | data: UserCreateInput;
27 | };
28 |
29 | export type MutationDeleteOnePostArgs = {
30 | where: PostWhereUniqueInput;
31 | };
32 |
33 | export type MutationCreateDraftArgs = {
34 | title?: Maybe;
35 | content?: Maybe;
36 | authorEmail?: Maybe;
37 | };
38 |
39 | export type MutationPublishArgs = {
40 | id?: Maybe;
41 | };
42 |
43 | export type Post = {
44 | __typename?: "Post";
45 | id: Scalars["ID"];
46 | title: Scalars["String"];
47 | content?: Maybe;
48 | createdAt: Scalars["DateTime"];
49 | updatedAt: Scalars["DateTime"];
50 | published: Scalars["Boolean"];
51 | };
52 |
53 | export type PostCreateManyWithoutPostsInput = {
54 | create?: Maybe>;
55 | connect?: Maybe>;
56 | };
57 |
58 | export type PostCreateWithoutAuthorInput = {
59 | id?: Maybe;
60 | published: Scalars["Boolean"];
61 | title: Scalars["String"];
62 | content?: Maybe;
63 | };
64 |
65 | export type PostWhereUniqueInput = {
66 | id?: Maybe;
67 | };
68 |
69 | export type Query = {
70 | __typename?: "Query";
71 | post?: Maybe;
72 | users: Array;
73 | feed: Array;
74 | filterPosts: Array;
75 | };
76 |
77 | export type QueryPostArgs = {
78 | where: PostWhereUniqueInput;
79 | };
80 |
81 | export type QueryFeedArgs = {
82 | published?: Maybe;
83 | };
84 |
85 | export type QueryFilterPostsArgs = {
86 | searchString?: Maybe;
87 | };
88 |
89 | export type User = {
90 | __typename?: "User";
91 | id: Scalars["ID"];
92 | name?: Maybe;
93 | email: Scalars["String"];
94 | posts?: Maybe>;
95 | };
96 |
97 | export type UserPostsArgs = {
98 | skip?: Maybe;
99 | after?: Maybe;
100 | before?: Maybe;
101 | first?: Maybe;
102 | last?: Maybe;
103 | };
104 |
105 | export type UserCreateInput = {
106 | id?: Maybe;
107 | email: Scalars["String"];
108 | name?: Maybe;
109 | posts?: Maybe;
110 | };
111 | export type PostFragmentFragment = { __typename?: "Post" } & Pick<
112 | Post,
113 | "id" | "published" | "title" | "content" | "published"
114 | >;
115 |
116 | export type UserFragmentFragment = { __typename?: "User" } & Pick<
117 | User,
118 | "id" | "name" | "email"
119 | >;
120 |
121 | export type CreateDraftMutationMutationVariables = {
122 | title: Scalars["String"];
123 | content: Scalars["String"];
124 | authorEmail: Scalars["String"];
125 | };
126 |
127 | export type CreateDraftMutationMutation = { __typename?: "Mutation" } & {
128 | createDraft: { __typename?: "Post" } & PostFragmentFragment;
129 | };
130 |
131 | export type DeleteOnePostMutationVariables = {
132 | id: Scalars["ID"];
133 | };
134 |
135 | export type DeleteOnePostMutation = { __typename?: "Mutation" } & {
136 | deleteOnePost: Maybe<{ __typename?: "Post" } & PostFragmentFragment>;
137 | };
138 |
139 | export type PublishMutationMutationVariables = {
140 | id: Scalars["ID"];
141 | };
142 |
143 | export type PublishMutationMutation = { __typename?: "Mutation" } & {
144 | publish: Maybe<{ __typename?: "Post" } & PostFragmentFragment>;
145 | };
146 |
147 | export type SignupUserMutationMutationVariables = {
148 | name: Scalars["String"];
149 | email: Scalars["String"];
150 | };
151 |
152 | export type SignupUserMutationMutation = { __typename?: "Mutation" } & {
153 | signupUser: { __typename?: "User" } & UserFragmentFragment;
154 | };
155 |
156 | export type FeedQueryQueryVariables = {
157 | published: Scalars["Boolean"];
158 | };
159 |
160 | export type FeedQueryQuery = { __typename?: "Query" } & {
161 | feed: Array<{ __typename?: "Post" } & PostFragmentFragment>;
162 | };
163 |
164 | export type PostQueryQueryVariables = {
165 | id: Scalars["ID"];
166 | };
167 |
168 | export type PostQueryQuery = { __typename?: "Query" } & {
169 | post: Maybe<{ __typename?: "Post" } & PostFragmentFragment>;
170 | };
171 |
172 | export type UsersQueryQueryVariables = {};
173 |
174 | export type UsersQueryQuery = { __typename?: "Query" } & {
175 | users: Array<{ __typename?: "User" } & UserFragmentFragment>;
176 | };
177 | export const PostFragmentFragmentDoc = gql`
178 | fragment PostFragment on Post {
179 | id
180 | published
181 | title
182 | content
183 | published
184 | }
185 | `;
186 | export const UserFragmentFragmentDoc = gql`
187 | fragment UserFragment on User {
188 | id
189 | name
190 | email
191 | }
192 | `;
193 | export const CreateDraftMutationDocument = gql`
194 | mutation createDraftMutation(
195 | $title: String!
196 | $content: String!
197 | $authorEmail: String!
198 | ) {
199 | createDraft(title: $title, content: $content, authorEmail: $authorEmail) {
200 | ...PostFragment
201 | }
202 | }
203 | ${PostFragmentFragmentDoc}
204 | `;
205 | export type CreateDraftMutationMutationFn = ReactApollo.MutationFn<
206 | CreateDraftMutationMutation,
207 | CreateDraftMutationMutationVariables
208 | >;
209 | export type CreateDraftMutationComponentProps = Omit<
210 | ReactApollo.MutationProps<
211 | CreateDraftMutationMutation,
212 | CreateDraftMutationMutationVariables
213 | >,
214 | "mutation"
215 | >;
216 |
217 | export const CreateDraftMutationComponent = (
218 | props: CreateDraftMutationComponentProps
219 | ) => (
220 |
224 | mutation={CreateDraftMutationDocument}
225 | {...props}
226 | />
227 | );
228 |
229 | export const DeleteOnePostDocument = gql`
230 | mutation deleteOnePost($id: ID!) {
231 | deleteOnePost(where: { id: $id }) {
232 | ...PostFragment
233 | }
234 | }
235 | ${PostFragmentFragmentDoc}
236 | `;
237 | export type DeleteOnePostMutationFn = ReactApollo.MutationFn<
238 | DeleteOnePostMutation,
239 | DeleteOnePostMutationVariables
240 | >;
241 | export type DeleteOnePostComponentProps = Omit<
242 | ReactApollo.MutationProps<
243 | DeleteOnePostMutation,
244 | DeleteOnePostMutationVariables
245 | >,
246 | "mutation"
247 | >;
248 |
249 | export const DeleteOnePostComponent = (props: DeleteOnePostComponentProps) => (
250 |
251 | mutation={DeleteOnePostDocument}
252 | {...props}
253 | />
254 | );
255 |
256 | export const PublishMutationDocument = gql`
257 | mutation publishMutation($id: ID!) {
258 | publish(id: $id) {
259 | ...PostFragment
260 | }
261 | }
262 | ${PostFragmentFragmentDoc}
263 | `;
264 | export type PublishMutationMutationFn = ReactApollo.MutationFn<
265 | PublishMutationMutation,
266 | PublishMutationMutationVariables
267 | >;
268 | export type PublishMutationComponentProps = Omit<
269 | ReactApollo.MutationProps<
270 | PublishMutationMutation,
271 | PublishMutationMutationVariables
272 | >,
273 | "mutation"
274 | >;
275 |
276 | export const PublishMutationComponent = (
277 | props: PublishMutationComponentProps
278 | ) => (
279 |
283 | mutation={PublishMutationDocument}
284 | {...props}
285 | />
286 | );
287 |
288 | export const SignupUserMutationDocument = gql`
289 | mutation signupUserMutation($name: String!, $email: String!) {
290 | signupUser(data: { name: $name, email: $email }) {
291 | ...UserFragment
292 | }
293 | }
294 | ${UserFragmentFragmentDoc}
295 | `;
296 | export type SignupUserMutationMutationFn = ReactApollo.MutationFn<
297 | SignupUserMutationMutation,
298 | SignupUserMutationMutationVariables
299 | >;
300 | export type SignupUserMutationComponentProps = Omit<
301 | ReactApollo.MutationProps<
302 | SignupUserMutationMutation,
303 | SignupUserMutationMutationVariables
304 | >,
305 | "mutation"
306 | >;
307 |
308 | export const SignupUserMutationComponent = (
309 | props: SignupUserMutationComponentProps
310 | ) => (
311 |
315 | mutation={SignupUserMutationDocument}
316 | {...props}
317 | />
318 | );
319 |
320 | export const FeedQueryDocument = gql`
321 | query feedQuery($published: Boolean!) {
322 | feed(published: $published) {
323 | ...PostFragment
324 | }
325 | }
326 | ${PostFragmentFragmentDoc}
327 | `;
328 | export type FeedQueryComponentProps = Omit<
329 | ReactApollo.QueryProps,
330 | "query"
331 | > &
332 | ({ variables: FeedQueryQueryVariables; skip?: false } | { skip: true });
333 |
334 | export const FeedQueryComponent = (props: FeedQueryComponentProps) => (
335 |
336 | query={FeedQueryDocument}
337 | {...props}
338 | />
339 | );
340 |
341 | export const PostQueryDocument = gql`
342 | query postQuery($id: ID!) {
343 | post(where: { id: $id }) {
344 | ...PostFragment
345 | }
346 | }
347 | ${PostFragmentFragmentDoc}
348 | `;
349 | export type PostQueryComponentProps = Omit<
350 | ReactApollo.QueryProps,
351 | "query"
352 | > &
353 | ({ variables: PostQueryQueryVariables; skip?: false } | { skip: true });
354 |
355 | export const PostQueryComponent = (props: PostQueryComponentProps) => (
356 |
357 | query={PostQueryDocument}
358 | {...props}
359 | />
360 | );
361 |
362 | export const UsersQueryDocument = gql`
363 | query usersQuery {
364 | users {
365 | ...UserFragment
366 | }
367 | }
368 | ${UserFragmentFragmentDoc}
369 | `;
370 | export type UsersQueryComponentProps = Omit<
371 | ReactApollo.QueryProps,
372 | "query"
373 | >;
374 |
375 | export const UsersQueryComponent = (props: UsersQueryComponentProps) => (
376 |
377 | query={UsersQueryDocument}
378 | {...props}
379 | />
380 | );
381 |
--------------------------------------------------------------------------------
/frontend/graphql/fragments/post.gql:
--------------------------------------------------------------------------------
1 | #import from '../user.gql'
2 |
3 | fragment PostFragment on Post {
4 | id
5 | published
6 | title
7 | content
8 | published
9 | }
10 |
--------------------------------------------------------------------------------
/frontend/graphql/fragments/user.gql:
--------------------------------------------------------------------------------
1 | fragment UserFragment on User {
2 | id
3 | name
4 | email
5 | }
6 |
--------------------------------------------------------------------------------
/frontend/graphql/mutations/createDraft.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/post.gql'
2 |
3 | mutation createDraftMutation($title: String!, $content: String!, $authorEmail: String!) {
4 | createDraft(title: $title, content: $content, authorEmail: $authorEmail) {
5 | ...PostFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/graphql/mutations/deleteOnePost.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/post.gql'
2 |
3 | mutation deleteOnePost($id: ID!) {
4 | deleteOnePost(where: { id: $id }) {
5 | ...PostFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/graphql/mutations/publish.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/post.gql'
2 |
3 | mutation publishMutation($id: ID!) {
4 | publish(id: $id) {
5 | ...PostFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/graphql/mutations/signupUser.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/user.gql'
2 |
3 | mutation signupUserMutation($name: String!, $email: String!) {
4 | signupUser(data: { name: $name, email: $email }) {
5 | ...UserFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/graphql/queries/feed.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/post.gql'
2 |
3 | query feedQuery($published: Boolean!) {
4 | feed(published: $published) {
5 | ...PostFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/graphql/queries/post.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/post.gql'
2 |
3 | query postQuery($id: ID!) {
4 | post(where: { id: $id }) {
5 | ...PostFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/graphql/queries/users.gql:
--------------------------------------------------------------------------------
1 | #import from '../fragments/user.gql'
2 |
3 | query usersQuery {
4 | users {
5 | ...UserFragment
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/frontend/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
--------------------------------------------------------------------------------
/frontend/next.config.js:
--------------------------------------------------------------------------------
1 | const withGraphql = require('next-plugin-graphql');
2 | const withCSS = require('@zeit/next-css');
3 |
4 | const path = require('path');
5 |
6 | module.exports = withCSS(
7 | withGraphql({
8 | // webpack: function(config, options) {
9 | // config.resolve.alias['components'] = path.join(__dirname, 'components');
10 | // config.resolve.alias['graphql'] = path.join(__dirname, 'graphql');
11 | // config.resolve.alias['interfaces'] = path.join(__dirname, 'interfaces');
12 | // config.resolve.alias['pages'] = path.join(__dirname, 'pages');
13 | // config.resolve.alias['utils'] = path.join(__dirname, 'utils');
14 | // }
15 | })
16 | );
17 |
--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "with-typescript",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "dev": "next",
6 | "build": "next build",
7 | "start": "next start",
8 | "type-check": "tsc",
9 | "generate": "gql-gen --config codegen.yml"
10 | },
11 | "dependencies": {
12 | "@zeit/next-css": "^1.0.1",
13 | "antd": "^3.20.0",
14 | "apollo-boost": "^0.4.3",
15 | "graphql": "^14.4.1",
16 | "isomorphic-unfetch": "^3.0.0",
17 | "lodash": "^4.17.11",
18 | "next": "8.1.1-canary.61",
19 | "next-plugin-graphql": "0.0.2",
20 | "react": "^16.7.0",
21 | "react-apollo": "^2.5.8",
22 | "react-dom": "^16.7.0"
23 | },
24 | "devDependencies": {
25 | "@graphql-codegen/cli": "^1.3.1",
26 | "@graphql-codegen/typescript": "^1.3.1",
27 | "@graphql-codegen/typescript-operations": "^1.3.1",
28 | "@graphql-codegen/typescript-react-apollo": "^1.3.1",
29 | "@types/node": "^11.13.9",
30 | "@types/react": "^16.8.15",
31 | "@types/react-dom": "^16.0.11",
32 | "typescript": "3.5.2"
33 | },
34 | "license": "ISC"
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/pages/_app.jsx:
--------------------------------------------------------------------------------
1 | import App, { Container } from 'next/app';
2 | import React from 'react';
3 | import withApolloClient from '../utils/with-apollo-client';
4 | import { ApolloProvider } from 'react-apollo';
5 | import 'antd/dist/antd.css';
6 | class MyApp extends App {
7 | render() {
8 | const { Component, pageProps, apolloClient } = this.props;
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | export default withApolloClient(MyApp);
20 |
--------------------------------------------------------------------------------
/frontend/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { NextPage } from 'next';
3 | import Layout from '../components/main-layout';
4 | import FeedList from '../components/feed';
5 | import NewDraft from '../components/new-draft';
6 | import UsersList from '../components/users';
7 | import SignupUser from '../components/signup-user';
8 |
9 | const IndexPage: NextPage = () => {
10 | return (
11 |
12 | Simple Prisma 2 Blog Example
13 | Create User
14 |
15 | Users
16 |
17 |
18 | Create Draft
19 |
20 | Feed
21 |
22 | Hidden Feed
23 |
24 |
25 | );
26 | };
27 |
28 | export default IndexPage;
29 |
--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "alwaysStrict": true,
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "jsx": "preserve",
9 | "lib": [
10 | "dom",
11 | "es2017"
12 | ],
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "noEmit": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "resolveJsonModule": true,
20 | "skipLibCheck": true,
21 | "strict": true,
22 | "target": "esnext"
23 | },
24 | "exclude": [
25 | "node_modules"
26 | ],
27 | "include": [
28 | "**/*.ts",
29 | "**/*.tsx"
30 | ]
31 | }
32 |
--------------------------------------------------------------------------------
/frontend/utils/init-apollo.js:
--------------------------------------------------------------------------------
1 | import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-boost';
2 | import fetch from 'isomorphic-unfetch';
3 |
4 | let apolloClient = null;
5 |
6 | function create(initialState) {
7 | // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
8 | const isBrowser = typeof window !== 'undefined';
9 | return new ApolloClient({
10 | connectToDevTools: isBrowser,
11 | ssrMode: !isBrowser, // Disables forceFetch on the server (so queries are only run once)
12 | link: new HttpLink({
13 | uri: isBrowser ? 'http://localhost:4000' : 'http://backend:4000', // Server URL (must be absolute)
14 | credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
15 | // Use fetch() polyfill on the server
16 | fetch: !isBrowser && fetch
17 | }),
18 | cache: new InMemoryCache().restore(initialState || {})
19 | });
20 | }
21 |
22 | export default function initApollo(initialState) {
23 | // Make sure to create a new client for every server-side request so that data
24 | // isn't shared between connections (which would be bad)
25 | if (typeof window === 'undefined') {
26 | return create(initialState);
27 | }
28 |
29 | // Reuse client on the client-side
30 | if (!apolloClient) {
31 | apolloClient = create(initialState);
32 | }
33 |
34 | return apolloClient;
35 | }
36 |
--------------------------------------------------------------------------------
/frontend/utils/with-apollo-client.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import initApollo from './init-apollo';
3 | import Head from 'next/head';
4 | import { getDataFromTree } from 'react-apollo';
5 |
6 | export default App => {
7 | return class Apollo extends React.Component {
8 | static displayName = 'withApollo(App)';
9 | static async getInitialProps(ctx) {
10 | const { Component, router } = ctx;
11 |
12 | let appProps = {};
13 | if (App.getInitialProps) {
14 | appProps = await App.getInitialProps(ctx);
15 | }
16 |
17 | // Run all GraphQL queries in the component tree
18 | // and extract the resulting data
19 | const apollo = initApollo();
20 | if (typeof window === 'undefined') {
21 | try {
22 | // Run all GraphQL queries
23 | await getDataFromTree();
24 | } catch (error) {
25 | // Prevent Apollo Client GraphQL errors from crashing SSR.
26 | // Handle them in components via the data.error prop:
27 | // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
28 | console.error('Error while running `getDataFromTree`', error);
29 | }
30 |
31 | // getDataFromTree does not call componentWillUnmount
32 | // head side effect therefore need to be cleared manually
33 | Head.rewind();
34 | }
35 |
36 | // Extract query data from the Apollo store
37 | const apolloState = apollo.cache.extract();
38 |
39 | return {
40 | ...appProps,
41 | apolloState
42 | };
43 | }
44 |
45 | constructor(props) {
46 | super(props);
47 | this.apolloClient = initApollo(props.apolloState);
48 | }
49 |
50 | render() {
51 | return ;
52 | }
53 | };
54 | };
55 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docker-prisma",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "docker-compose up --build",
8 | "stop": "docker-compose down",
9 | "clean": "docker system prune -af",
10 | "seed": "docker exec -it prisma npm run seed",
11 | "generate": "docker exec -it frontend npm run generate",
12 | "test": "echo \"Error: no test specified\" && exit 1"
13 | },
14 | "author": "",
15 | "license": "ISC",
16 | "dependencies": {
17 | "graphql-tag": "^2.10.1"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------