[component] Chat

[hoodsy]

• Query for Messages
• Infinite scroll loading of Messages (see https://github.com/homeroom-live/ui/blob/staging/src/components/Chat/ChatMessages.js)
• Mutation for createMessage
• Identify if Message is from teacher
• Styling (@hoodsy)

[hoodsy]

@maticzav pollInterval question...

Right now, when a polling query is fired, we get the the 20 most recent messages. We need to append any new messages to our initial 20 messages.

For example:

1. Initial query – 20 most recent messages
2. User sends messages, other Users send messages
3. Polling query – 10 new messages are appended to initial 20
4. User sees 30 messages total

I'm thinking we will have to use some pagination, or something like that. Then our polling query would take an after argument.. Any thoughts?

[hoodsy]

It seems that pollInterval and fetchMore aren't meant to work together: apollographql/apollo-client#1087

Struggling with the best approach for getting fresh messages in Chat... I'll hold off until I get your input

[maticzav]

Yea, I see. Tricky question haha; I think we already have pagination set up for messages. Couldn't we do it in two ways? Fetch more one way and polls on the other side?

[hoodsy]

I'm pretty sure the polling query overwrites the fetchMore, so that if we fetchMore and have 30 messages, the polling query will bring us back to 20.

The polling doesn't append... I'm thinking we could use fetchMore with an interval. Basically hack together our own polling.

There's probably a better way tho

[maticzav]

Are you sure about this? I would assume they must have addressed this somehow - this is such a regular use case!

[hoodsy]

Basically, we have one query which has two parameters - endCursor and startCursor
endCursor is used for refetching, startCursor for loading more messages
Now, as far as I understand Apollo fetchMore accepts cursor variable and we have to update cache on our own - 💯 one down one to go
With polling, we could just change the endCursor and modify cache with updateQuery

[hoodsy]

@maticzav we may want to go for subscriptions... I'm struggling to find a way to make polling and updateQuery work

[maticzav]

Have you found a way to solve this?

[hoodsy]

@maticzav I have not... I can begin exploring subscriptions but I would leave it to you to get the back end set up for subscriptions, unless you want me to mock out some resolvers and get subscriptions functional.

[maticzav]

I totally missed the last message! I think we should still try to get the functionality without subscriptions. Maybe we could push back subscriptions for a little while and finish everything else first. Tell me what you think! 🙂

[hoodsy]

Yeah I'm feeling this too. Chat will be something we iterate on a lot!

[maticzav]

Hey, I watched a Twitch stream last night and figured out we definitely need subscriptions. If we were to use polling instead, we could end up loading five messages at a time which is inferior user experience.

Tell me about your experience with subscriptions so far. I believe there's a portion of documentation that I should want to read before we jump into implementing it.

[hoodsy]

That's awesome to hear! I think it's important that we develop (and maintain) an understanding of other streaming products in the market, especially while streaming is relatively young.

Subscriptions worked quite well for me until I began dealing with some Prisma errors. They directed me to use polling as a workaround while they resolved potential memory leaks with subscriptions (I thiiink that was the issue).

Once I was able to get the resolver/Prisma side working for subscriptions, it was pretty much a breeze. The interface with <Query> and subscribeToMore was pretty straightforward. I don't think you'll have too much trouble with it!

One thing I think we should look out for is configuring the apollo-link and apollo-link-ws properly, but maybe that's a given. I had issues in the past uploading files depending on the order of my links.