How to query for loggedInUser in React component?

prisma-cloud
prisma

#1

Hi, I’m working off of the advanced node-graphql-server hooked up to a create-react-app frontend.

I’m trying to build a navbar component that will fetch data on the user that’s currently logged in. I’ve set up a query in my navbar component that successfully fetches the logged in user’s username using the {me} query, but I can’t seem to get it to render in the browser.

Relevant code snippets:

Application schema
react-app/server/src/schema.graphql:

type Query {
    me: User
}
type User {
    id: ID!
    email: String!
    username: String!
}

Resolver
react-app/server/src/resolvers/Query.js

const { getUserId } = require('../utils')
const Query = {
    me(parent, args, ctx, info) {
        const id = getUserId(ctx)
        return ctx.db.query.user({ where: { id } }, info)
    }
}

Navbar component
react-app/src/components/Header.js

import React, { Component } from 'react'
import { withRouter } from 'react-router'
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'

class Header extends Component {
    render() {
        const loggedInUser = this.props.loggedInUserQuery.me

        return (
            <div>{loggedInUser.username}</div>
        )
    }
}

const LOGGED_IN_USER_QUERY = gql`
    query LoggedInUserQuery {
        me {
            id
            username
        }
    }
`

export default graphql(LOGGED_IN_USER_QUERY, { 
    name: 'loggedInUserQuery',
}) (withRouter(Header))

When I run this locally in Chrome, I get an error:

TypeError: Cannot read property 'username' of undefined

I hope that makes sense. I’m not sure how to fix this issue (first time app builder here). Can someone help me figure out what I’m doing wrong?

Any help or direction is much appreciated!


#2

if you console.log(loggedInUserQuery) what do you see?


#3

Here’s what I get with “console.log(loggedInUserQuery)”:

const loggedInUserQuery = this.props.loggedInUserQuery
console.log(loggedInUserQuery)

Alternatively, here’s what I get with “console.log(loggedInUser)”:

const loggedInUser = this.props.loggedInUserQuery.me
console.log(loggedInUser)


#4

Issue resolved!

In my previous comment, it seemed odd that console.log(loggedInUserQuery) was outputting two sets of data - one with the “me” props and one without.

Turns out I just needed to control the loading state of my query. I did this by adding:

const loggedInUserQuery = this.props.loggedInUserQuery
const loggedInUser = this.props.loggedInUserQuery.me

if (loggedInUserQuery.loading) {
    return null
}

return (
    <div>{loggedInUser.username}</div>
)

Username now properly renders in my navbar component.

Hope this helps any others starting out with React/Apollo/Prisma. Thanks @wesbos for nudging me towards debugging via console.


#5

Can you to resolve an issue with my router? Or else it should be best for contacting a Router Customer Service Number ? please do reply to me on behalf of this


#6

How to buy Retail Software ?