Skip to content

Commit 2765a22

Browse files
committed
Update Readme
1 parent 6a06a82 commit 2765a22

File tree

1 file changed

+42
-1
lines changed

1 file changed

+42
-1
lines changed

README.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
1-
# jsconfbp-2019-graphql-ui
1+
# JSCONF BP 2019 Graphql UI
2+
3+
## Intro
4+
5+
The following create-react-app application is UI for the previously built GQL API.
6+
7+
You should be able to do the following actions:
8+
- Register and login a user
9+
- Create a post as a user
10+
- Comment on a post as a user
11+
- List out posts with filters
12+
- List out comments on a post
13+
14+
There are 4 task to finish this application. Keep an eye out for the TODO comments.
15+
While finishing these 4 tasks you will learn some basic and some advanced practices on building an apollo-client based UI.
16+
17+
Used dependencies:
18+
- State management: React features such as [hooks](https://reactjs.org/docs/hooks-intro.html) and [context](https://reactjs.org/docs/context.html).
19+
- Routing: [React-Router](https://reacttraining.com/react-router/web/guides/quick-start)
20+
- Components: [React-Bootstrap](https://react-bootstrap.github.io/)
21+
- Styling: [Sass](https://sass-lang.com/)
22+
- Linting: [ESLint](https://eslint.org/)
23+
- Additional packages: [Luxon](https://moment.github.io/luxon/), [Lodash](https://lodash.com/), [Husky](https://github.com/typicode/husky#readme)
24+
25+
## Tasks
26+
27+
### TASK 1.
28+
Migrate from apollo-boost, write an onError error handler and add a basic inmemory-cache to the apollo client. (TIP: [Migration](https://www.apollographql.com/docs/react/advanced/boost-migration/))
29+
- Extra task: Implement a global loader apollo middleware - increment number at request, decrement at response. (This will require a global state manager like Mobx or Redux)
30+
31+
### TASK 2.
32+
Implement the handleSignin function and the SIGNIN_QUERY for the singin (Signin.jsx) page. (TIP: Use the register (Register.jsx) page for an example)
33+
- Extra task: create a User fragment and use it with every user query and mutation in the src/query/user.js and in the comment and post fragment. (TIP: Use the fragments.js for examples)
34+
35+
### TASK 3.
36+
Using the Query component fetch down the post in the post (Posts.jsx) page.
37+
(TIP: Use the hello (Hello.jsx) page for an example, use limit and filters variables)
38+
- Extra task: when you are done, translate your Query component to a useQuery hook.
39+
40+
### TASK 4.
41+
Using useQuery hook and fetchMore implement the querying behind the comments section and its pagination for the post (Post.jsx) page. (TIP: Use the posts (Posts.jsx) page for an example, use a reasonable fetchPolicy option so you will be able to see new comments)
42+
- Extra task: implement the handleCreateComment function and CREATE_COMMENT_MUTATION mutatation for comment posting (TIP: use the refetch after posting the new comment from the useQuery hook in the original task)

0 commit comments

Comments
 (0)