Build a Threaded Email Inbox View with the Nylas Email API

It can be easy to think about email as being similar to physical mail, with independent messages that are delivered as self-contained packages. But, in reality, a single message is usually part of a larger conversation, and the other messages in those conversations play an important role to help users understand the greater context behind the messages. 

If you’re a developer who wants to integrate content from your user’s email inboxes into your app, you need to take this context into consideration to build proper groupings of emails that provide your users with a more cohesive, natural view of their email conversations. Fortunately, The Nylas Email API abstracts away the complexity of grouping email conversations into threads, so you can spend less time dealing with complex email data and more time building the features your users love. 

Want a PDF of this article?

Share it with a friend or save it for later reading.

Send me a PDF

The Nylas Platform provides a single point of integration that instantly connects 100% of email, calendar and contacts providers to your app, via simple REST APIs. This article will show you how to use Nylas to build a threaded email conversation view.

To demonstrate how to build a threaded email view, we’ve built Inbox Zero, a demo application you can run to explore and understand the Nylas Email API. It’s built using:

• Next.js, a framework for making server-rendered React apps,
• Express.js to create RESTful endpoints on the server,
• JSON Web Tokens (JWT) for authentication and session management,
• Lowdb, a lightweight key-value database powered by Lodash, for storing user information, and
• The Nylas Node SDK, a client helper library that makes it easy to leverage the Nylas Platform.

Before we get into building anything, it’s important to understand how Nylas treats emails. The Nylas Email API provide two fundamental components for working with emails:

• Messages are individual emails that serve as the basic component in an email interaction. 
• Threads are a series of messages that have been sent in the same email conversation. Nylas takes care of the hard work to figure out which messages belong to which threads, making it easier for you to get the emails your user needs.

In Inbox Zero, the primary inbox view shows basic information about each thread, including the subject, last message date, and the most recent sender in the conversation. If the user clicks on one of these thread, it will expand to show the latest email in the thread.

const PAGE_LIMIT = 6;
const page = req.query.page >= 1 ? req.query.page : 1;
const threads = await nylas.threads.list({
        in: "inbox",
        unread: true,
        view: "expanded",
        limit: PAGE_LIMIT + 1,
        offset: (page - 1) * PAGE_LIMIT
});

res.send({
        hasPrevious: page > 1,
        hasNext: threads.length > PAGE_LIMIT,
        threads: threads.slice(0, PAGE_LIMIT).map(thread => ({
                id: thread.id,
                subject: thread.subject,
                from: thread.from,
                date: thread.lastMessageTimestamp,
                snippet: thread.snippet,
                unread: thread.unread,
                hasAttachments: thread.hasAttachments
        }))
});

const id = req.params.id;
const thread = await nylas.threads.find(id, null, { view: "expanded" });

const messages = await nylas.messages.list({ thread_id: id, view: "expanded" });

const [previousThreadIds, nextThreadIds] = await Promise.all([
        nylas.threads.list({
                in: "inbox",
                unread: true,
                last_message_after: thread.lastMessageTimestamp,
                limit: 1000,
                view: "ids"
        }),
        nylas.threads.list({
                in: "inbox",
                unread: true,
                last_message_before: thread.lastMessageTimestamp,
                limit: 1,
                view: "ids"
        })
]);
const previousThreadId = previousThreadIds.length > 0 ? previousThreadIds[previousThreadIds.length - 1] : null;
const nextThreadId = nextThreadIds.length > 0 ? nextThreadIds[0] : null;

return res.status(200).json({
        id,
        subject: thread.subject,
        from: threadFrom,
        messages: messages.map(simplifyMessage),
        date: thread.lastMessageTimestamp,
        snippet: thread.snippet,
        hasAttachments: thread.hasAttachments,
        unread: thread.unread,
        senderUnread,
        previousThreadId,
        nextThreadId
});

const id = req.query.id;
const file = await req.nylas.files.find(id);
const fileData = await file.download();
res.send(fileData.body);