PhotoShare Client

PhotoShare Client is the main front-end exercise for GraphQL Workshop. In this exercise, students build a website using the Apollo Client with Apollo React.

Iterations

Start

1. Starting Point (files)

a. Setting up Apollo Client

1. Create the Apollo Client (diff) (files)
2. Render ApolloProvider (diff) (files)

b. Handling Users

1. Add ALL_USERS Query (diff) (files)
2. Display the User list (diff) (files)
3. Add ADD_FAKE_USERS Mutation (diff) (files)
4. Update the local cache with new users (diff) (files)
5. Setting the fake user count (diff) (files)

c. Github Authorization

1. Environment Variables (diff) (files)
2. Adding the React Router (diff) (files)
3. Obtaining the Github Code (diff) (files)
4. Adding GITHUB_AUTH_MUTATION (diff) (files)
5. Adding Authorization Header (diff) (files)
6. Identifying the user with ME Query (diff) (files)
7. Handling Logging Out (diff) (files)

d. Incorporating Subscriptions

1. Adding a WebSocket Link (diff) (files)
2. Persisting Data (diff) (files)
3. Subscribing to new users (diff) (files)

e. Incorporating the UI

1. Incorporating the Main User Interface (diff) (files)
2. Incorporating the UserList UI Component (diff) (files)
3. Adding Fake User Authorization (diff) (files)
4. Incorporating the Auth UI Component (diff) (files)

f. Posting Photos

1. Modify the httpLink for uploads (diff) (files)
2. Routing to the Post Photo Form (diff) (files)
3. Incorporating the Post Photo Form (diff) (files)
4. Adding the POST_PHOTO_MUTATION (diff) (files)
5. Adding ALL_PHOTOS Query (diff) (files)
6. Adding Photo Subscriptions (diff) (files)
7. Incorporating the PhotoList UI Component (diff) (files)