srtucker22 / chatty

A WhatsApp clone with React Native and Apollo (Tutorial)

Chatty

A WhatsApp clone with React Native and Apollo

• Overview
• Steps
• Installing
• Getting Started
• Contributing
• Licence

Overview

View the Medium blog for this tutorial here.

This tutorial was created using tortilla, an incredible framework for building tutorials.

Starting with the very first commit, every commit in Chatty represents the next step in the tutorial. Follow the tutorial for a guided walk through the code, or investigate a commit to see exactly what code changed for a given step. Since this is git, you can even download the app at any step in the tutorial -- how cool is that?!

Steps

1. Setup
2. GraphQL Queries with ApolloServer
3. GraphQL Queries with React Apollo
4. GraphQL Mutations & Optimistic UI
5. GraphQL Pagination
6. GraphQL Subscriptions
7. GraphQL Authentication
8. GraphQL Input Types

Installing

npm install                       # install server dependencies
cd client && npm install          # install client dependencies

For Steps 7 and higher, please enter your configuration variables in .env:

# use your own secret!!!
JWT_SECRET=your_secret

Getting Started

npm start                         # start the server
cd client && react-native run-ios  # start RN client

Contributing

This project welcomes code contributions, bug reports and feature requests. Please see the guidelines in CONTRIBUTING.MD if you are interested in contributing.

License

MIT License

Copyright (c) 2018 Simon Tucker

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Begin Tutorial >

chatty's Issues

Upgrade database?

Hi, you say in your intro that you will be using sqlite 'for now'. Are there plans to show an upgrade to postgres or mongo, etc?

Also, FYI if you are not aware there is a very interesting project called postgraphql you might be interested in. I am leaning hard in that direction as JS isn't in my toolbox yet and by what I am seeing I can eliminate the express/ruby/python back end server all-together and query direct to graphQL at the database...

Tutorial upgraded to [email protected]

@srtucker22 Great Work! Loved your tutorial. I've upgraded your tutorial to the latest version of Tortilla at https://github.com/DAB0mB/chatty; would you mind force pushing all refs (branches and tags) into your repo? I'm one of the main contributors of the Tortilla project together with @Urigo and we thought that it would be a good idea to test some new features of Tortilla like releases git-diffing and JSON file dumping. We can test these features with my fork however we would very much prefer that the changes would be part of the official repo. Thanks a lot!

react native client install error.

react native client install error as blow and install progress will be suspended here:
npm ERR! Unexpected end of JSON input while parsing near '...tro/download/metro-0.'

reproduce:
cd client
npm install
you will get the error, any my env as blow:
node: v11.2.0
rn: react-native-cli: 2.0.1

Step 5: add Relay Cursor Connections

This would really improve performance all around and show some killer features of using complex pagination with GraphQL

Step 11: Push Notifications

• write copy
• publish medium

Subscriptions with Redis

Hello and thank you for this wonderful and really helpful tutorial!

I was reading that the PubSub mechanism graphql-subscriptions are not suitable for production use.
Have you tried using graphql-redis-subscriptions or maybe do you have any code that you could share? That would be really helpful because I am facing some difficulties there.

Thank you once again

Is it as fast as WhatsApp ?

Hi there,

In WhatsApp, When you press on a group, the speed to show the messages of the group is reaaally fast. Any group, even the 2 years old groups. I don't know how they reach such a speed.

Do you succeed to go as fast as WhatsApp with your app ?
If so, what is the secret ?
If not, what do you think is their secret ?

Hi all, please check help me, i want to create new function find friend, but i has an issues as photo, so i don't know handler data when server response.

Invariant Violation: The operation 'findFriend' wrapping 'Connect(Apollo(Groups))' is expecting a variable: 'username' but it was not found in the props passed to 'Apollo(Connect(Apollo(Groups)))'

Step 11: add push notifications for new group

Make sure this doesn't eat up a lot of space in the tutorial

Step 12: GraphQL File Uploads

• write copy
• publish medium

Step 9: add offline mode

If we're talking about cache control, makes sense to put this feature here. Could eliminate auth store as well for much cleaner flow 👍

This should really get implemented after #4 is successfully part of the tutorial

Send photo, audio, and video messages!

Maybe this is Step 13?

Step 10: Apollo Optics and Optimization

• write copy
• publish medium

Step 8: Input Types

• write copy
• publish medium
• update step 5 with relay cursor connections
• add input types for pagination to show input type value as a query distinguisher

Update Steps 1-8 with latest Apollo, React Native, updated APIs

apollo-server >=2.6
@apollo/react-hooks >=3.1
react-native >=0.60

replace redux with apollo @client local state now that Apollo DevTools is built into React Native DevTools!

'modified-medium' manual transformation doesn't match required Medium format

• ellipses between code line breaks
• clean up spacing

any preview??

apollo-client v2

Upgrade the entire tutorial to latest version of apollo-client.

apollo-client v2 no longer uses Redux for caching GraphQL data, so there is currently no good dev tooling for Apollo 2 with React Native (there’s no Apollo DevTools for React Native). Once there are adequate dev tools for Apollo 2 with React Native, update the whole tutorial!

Relevant issues:
apollographql/apollo-client#2509
apollographql/apollo-client-devtools#6

Step 6: add SubscriptionEvent interface and organize subscriptions

something like this implementation could make adding new subscriptions for things like updated/deleted groups and users relatively trivial to implement and explain

Step 12: check for changed group icon in Messages screen

Group image checking logic is faulty for Messages screen header

undefined is not an object (evaluating 'action.payload.auth')

followed the readme to setup.
server is able to start.
RN app crashed with this error
undefined is not an object (evaluating 'action.payload.auth')

Convert project to Expo

• https://expo.io/

[Network error] Android

Hey man, awesome thing you made, really liked the tutorial 👌

Quick question, I'm trying to get the app running on Android and getting "Network error: Network request failed". Does it happen to you as well, and if yes do you maybe have an idea how it might be resolved? On iOS it's working.

I'm trying to figure it out, if I find solution I'll provide PR.

Cheers!

Throw when missing environment variables

Make it obvious on when running server that required environment variables are missing (per step)

Step 5: Relay cursor connections

This will also set up more performant refetching when reconnecting with subscriptions

Add friends via phone contacts

Not sure where this belongs in the tutorial... but definitely important feature for making chatty legit

Android support

How should this get added to the tutorial?

Implementation at every substep would be really arduous, but we do want to end up with one codebase. I think the issue here is that it would make the tutorial code very long and might require additional explanation at every step.

Might make more sense to have an extra sub step at the end of each main step that applies any additional changes to support Android.

The best test here is to first see how many edits are needed if just updating code from the latest step.

Encountered a sub-selection on the query, but the store doesn't have \ an object reference

When I use a registered account, this problem occurs, how can I solve it?

Step 9: Apollo Cache Control

• write copy
• publish medium

Network error handling

Need to address this somehow somewhere that makes sense in the tutorial....