|
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