Skip to content
This repository was archived by the owner on Jul 16, 2024. It is now read-only.

Commit 6f8825c

Browse files
MichaelJComptonMichaelJCompton
committed
react router
1 parent 27477b9 commit 6f8825c

File tree

12 files changed

+495
-359
lines changed

12 files changed

+495
-359
lines changed

‎deploy/dev-setup/load-data.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,13 @@ const virat: AddUserInput = {
4747
}
4848

4949
const qsQuote = `
50-
With Dgraph you design your application in GraphQL. You design a set of GraphQL types that describes your requirements. Dgraph takes those types, prepares graph storage for them and generates a GraphQL API with queries and mutations.
50+
With Dgraph you design your application in GraphQL.
5151
52-
You design a graph, store a graph and query a graph. You think and design in terms of the graph that your app is based around.
52+
You start by designing a set of GraphQL types that describes your app. When you load that data model into Dgraph, it takes those types, prepares graph storage for them and generates a GraphQL API with queries and mutations.
53+
54+
With that you can iterate quickly. Thanks to Dgraph and all the tools in the GraphQL ecosystem, you can iterate on your data model and app without leaving your editor. There's so many great tools in GraphQL to help you develop, you should set those up early so you get a great development experience.
55+
56+
With Dgraph, you design the graph of your, store a graph and query a graph. You think and design in terms of the graph that your app is based around. And, best of all, you do all that inside the GraphQL ecosystem.
5357
`
5458

5559
const docsQuote = `
@@ -74,20 +78,20 @@ function makePosts(): Array<AddPostInput> {
7478

7579
return [
7680
{
77-
title: "My first post about GraphQL",
81+
title: "My first post about Dgraph GraphQL",
7882
text: qsQuote,
7983
datePublished: now,
8084
likes: 1,
8185
category: { name: "GraphQL" },
82-
author: michael,
86+
author: diggy,
8387
},
8488
{
8589
title: "Let me quote from the docs",
8690
text: docsQuote,
8791
datePublished: tenMinsAgo,
8892
likes: 5,
8993
category: { name: "GraphQL" },
90-
author: diggy,
94+
author: michael,
9195
},
9296
{
9397
title: "I know some things about Dgraph",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@apollo/client": "^3.0.0-rc.6",
6+
"@apollo/client": "^3.0.0-rc.9",
77
"@testing-library/jest-dom": "^4.2.4",
88
"@testing-library/react": "^9.3.2",
99
"@testing-library/user-event": "^7.1.2",

‎src/App.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
import React from 'react';
2-
import './App.css';
3-
import { Home } from './components';
1+
import React from "react"
2+
import "./App.css"
3+
import { AppHeader, Home, Post } from "./components"
4+
import { BrowserRouter, Switch, Route } from "react-router-dom"
45

56
export function App() {
67
return (
78
<div className="App">
8-
{Home()}
9+
<BrowserRouter>
10+
<AppHeader />
11+
<Switch>
12+
<Route exact path="/post/:id" component={Post} />
13+
<Route exact path="/" component={Home} />
14+
</Switch>
15+
</BrowserRouter>
916
</div>
10-
);
17+
)
1118
}

‎src/components/header.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react"
22
import { Container, Image, Menu, Icon } from "semantic-ui-react"
3+
import { Link } from "react-router-dom"
34

45
export function AppHeader() {
56
return (
@@ -13,7 +14,7 @@ export function AppHeader() {
1314
/>
1415
Dgraph Discuss
1516
</Menu.Item>
16-
<Menu.Item as="a">
17+
<Menu.Item as={Link} to="/">
1718
<Icon name="home" />
1819
Home
1920
</Menu.Item>

‎src/components/home.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import React from "react"
22
import { PostFeed } from "./posts"
3-
import { AppHeader } from "./header"
43

54
export function Home() {
6-
return (
7-
<div>
8-
{AppHeader()}
9-
{PostFeed()}
10-
</div>
11-
)
12-
}
5+
return <div>{PostFeed()}</div>
6+
}

‎src/components/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
import { Home } from "./home"
2+
import { AppHeader } from "./header"
3+
import { Post } from "./post"
24

3-
export { Home }
5+
export { AppHeader, Home, Post }

‎src/components/operations.graphql

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1+
fragment postData on Post {
2+
id
3+
title
4+
text
5+
datePublished
6+
likes
7+
category {
8+
name
9+
}
10+
author {
11+
username
12+
displayName
13+
avatarImg
14+
}
15+
}
16+
117
query allPosts {
218
queryPost(order: { desc: datePublished }) {
3-
id
4-
title
5-
text
6-
datePublished
7-
likes
8-
category {
9-
name
10-
}
11-
author {
12-
username
13-
displayName
14-
avatarImg
15-
}
19+
...postData
20+
}
21+
}
22+
23+
query getPost($id: ID!) {
24+
getPost(id: $id) {
25+
...postData
1626
}
1727
}

‎src/components/post.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from "react"
2+
import { useParams } from "react-router-dom"
3+
import { Container, Header, Loader, Image, Divider } from "semantic-ui-react"
4+
import { useGetPostQuery } from "./types/operations"
5+
import { DateTime } from "luxon"
6+
7+
interface PostParams {
8+
id: string
9+
}
10+
11+
export function Post() {
12+
const { id } = useParams<PostParams>()
13+
14+
const { data, loading, error } = useGetPostQuery({ variables: { id: id } })
15+
16+
if (loading) return <Loader />
17+
if (error) {
18+
return (
19+
<Container text style={{ marginTop: "7em" }}>
20+
<Header as="h1">Ouch! That page didn't load</Header>
21+
<p>Here's why : {error.message}</p>
22+
</Container>
23+
)
24+
}
25+
if (!data?.getPost) {
26+
return (
27+
<Container text style={{ marginTop: "7em" }}>
28+
<Header as="h1">This is not a post</Header>
29+
<p>You've navigated to a post that doesn't exist.</p>
30+
<p>That most likely means that the id {id} isn't the id of post.</p>
31+
</Container>
32+
)
33+
}
34+
35+
let dateStr = "at some unknown time"
36+
if (data.getPost.datePublished) {
37+
dateStr =
38+
DateTime.fromISO(data.getPost.datePublished).toRelative() ?? dateStr
39+
}
40+
41+
const paras = data.getPost.text.split("\n").map((str) => <p>{str}</p>)
42+
43+
return (
44+
<Container text textAlign="left" style={{ marginTop: "7em" }}>
45+
<Header as="h1">{data.getPost.title}</Header>
46+
<Header as="h3">Published : {dateStr}</Header>
47+
<Divider />
48+
<Image
49+
src={
50+
data.getPost.author.avatarImg ??
51+
"https://img.icons8.com/dotty/80/000000/question.png"
52+
}
53+
size="small"
54+
floated="left"
55+
style={{ margin: "2em 2em 2em -4em" }}
56+
/>
57+
{paras}
58+
</Container>
59+
)
60+
}

‎src/components/posts.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ export function PostFeed() {
4545
<Feed.Label>{avatar}</Feed.Label>
4646
<Feed.Content>
4747
<Feed.Summary>
48-
<Feed.User>{post?.author.displayName} </Feed.User> {post?.title}
48+
<Feed.User>{post?.author.displayName} </Feed.User>{" "}
49+
<a href={"/post/" + post?.id} style={{ color: "black" }}>
50+
{post?.title}
51+
</a>
4952
<Feed.Date>{dateStr}</Feed.Date>
5053
<Feed.Extra text>
5154
{post?.text.substring(0, 100)}...(posted in{" "}

‎src/components/types/operations.ts

Lines changed: 78 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,66 @@ import gql from 'graphql-tag';
44
import * as ApolloReactCommon from '@apollo/client';
55
import * as ApolloReactHooks from '@apollo/client';
66

7+
export type PostDataFragment = (
8+
{ __typename?: 'Post' }
9+
& Pick<Types.Post, 'id' | 'title' | 'text' | 'datePublished' | 'likes'>
10+
& { category: (
11+
{ __typename?: 'Category' }
12+
& Pick<Types.Category, 'name'>
13+
), author: (
14+
{ __typename?: 'User' }
15+
& Pick<Types.User, 'username' | 'displayName' | 'avatarImg'>
16+
) }
17+
);
18+
719
export type AllPostsQueryVariables = Types.Exact<{ [key: string]: never; }>;
820

921

1022
export type AllPostsQuery = (
1123
{ __typename?: 'Query' }
1224
& { queryPost?: Types.Maybe<Array<Types.Maybe<(
1325
{ __typename?: 'Post' }
14-
& Pick<Types.Post, 'id' | 'title' | 'text' | 'datePublished' | 'likes'>
15-
& { category: (
16-
{ __typename?: 'Category' }
17-
& Pick<Types.Category, 'name'>
18-
), author: (
19-
{ __typename?: 'User' }
20-
& Pick<Types.User, 'username' | 'displayName' | 'avatarImg'>
21-
) }
26+
& PostDataFragment
2227
)>>> }
2328
);
2429

30+
export type GetPostQueryVariables = Types.Exact<{
31+
id: Types.Scalars['ID'];
32+
}>;
33+
34+
35+
export type GetPostQuery = (
36+
{ __typename?: 'Query' }
37+
& { getPost?: Types.Maybe<(
38+
{ __typename?: 'Post' }
39+
& PostDataFragment
40+
)> }
41+
);
2542

43+
export const PostDataFragmentDoc = gql`
44+
fragment postData on Post {
45+
id
46+
title
47+
text
48+
datePublished
49+
likes
50+
category {
51+
name
52+
}
53+
author {
54+
username
55+
displayName
56+
avatarImg
57+
}
58+
}
59+
`;
2660
export const AllPostsDocument = gql`
2761
query allPosts {
2862
queryPost(order: {desc: datePublished}) {
29-
id
30-
title
31-
text
32-
datePublished
33-
likes
34-
category {
35-
name
36-
}
37-
author {
38-
username
39-
displayName
40-
avatarImg
41-
}
63+
...postData
4264
}
4365
}
44-
`;
66+
${PostDataFragmentDoc}`;
4567

4668
/**
4769
* __useAllPostsQuery__
@@ -66,4 +88,37 @@ export function useAllPostsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHoo
6688
}
6789
export type AllPostsQueryHookResult = ReturnType<typeof useAllPostsQuery>;
6890
export type AllPostsLazyQueryHookResult = ReturnType<typeof useAllPostsLazyQuery>;
69-
export type AllPostsQueryResult = ApolloReactCommon.QueryResult<AllPostsQuery, AllPostsQueryVariables>;
91+
export type AllPostsQueryResult = ApolloReactCommon.QueryResult<AllPostsQuery, AllPostsQueryVariables>;
92+
export const GetPostDocument = gql`
93+
query getPost($id: ID!) {
94+
getPost(id: $id) {
95+
...postData
96+
}
97+
}
98+
${PostDataFragmentDoc}`;
99+
100+
/**
101+
* __useGetPostQuery__
102+
*
103+
* To run a query within a React component, call `useGetPostQuery` and pass it any options that fit your needs.
104+
* When your component renders, `useGetPostQuery` returns an object from Apollo Client that contains loading, error, and data properties
105+
* you can use to render your UI.
106+
*
107+
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
108+
*
109+
* @example
110+
* const { data, loading, error } = useGetPostQuery({
111+
* variables: {
112+
* id: // value for 'id'
113+
* },
114+
* });
115+
*/
116+
export function useGetPostQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<GetPostQuery, GetPostQueryVariables>) {
117+
return ApolloReactHooks.useQuery<GetPostQuery, GetPostQueryVariables>(GetPostDocument, baseOptions);
118+
}
119+
export function useGetPostLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<GetPostQuery, GetPostQueryVariables>) {
120+
return ApolloReactHooks.useLazyQuery<GetPostQuery, GetPostQueryVariables>(GetPostDocument, baseOptions);
121+
}
122+
export type GetPostQueryHookResult = ReturnType<typeof useGetPostQuery>;
123+
export type GetPostLazyQueryHookResult = ReturnType<typeof useGetPostLazyQuery>;
124+
export type GetPostQueryResult = ApolloReactCommon.QueryResult<GetPostQuery, GetPostQueryVariables>;

0 commit comments

Comments
 (0)