TypeError: Cannot read property 'viewer' of undefined.

[ma-nish]

When component did mount, there is no value in { data } returned from component. So, it generates a TypeError: Cannot read property 'viewer' of undefined.

const Profile = () => (

{({ data, loading }) => {
const { viewer } = data;
if (loading || !viewer) {
return

Loading ...

;
}
return (

{viewer.name} {viewer.login}

)
}}

);

[ma-nish]

There are many possible solutions for this bug. Some of the solutions I have shared below:
1.
const Profile = () => (

{({ data, loading }) => {
const { viewer } = data ? data : false;
if (loading || !viewer) {
return ;
}
return (

{viewer.name} {viewer.login}

);
}}

);

const Profile = () => (

{({ data, loading }) => {
if (!data || loading) {
return ;
}
const { viewer } = data;
return (

{viewer.name} {viewer.login}

);
}}

);

[mejustdev]

It is really weird. Since data is set to undefined by default, We should handle that. Luckily I found your solution. Number 1 seems straightforward. Thanks

[petelc]

Hi, So I was getting this same error at the same spot as mentioned above and your fixed worked. So I went on and built out the repository list and item and changed the query. I am now getting the same error:
×
TypeError: Cannot read property 'edges' of undefined
RepositoryList
C:/Development/MERN/react-github-client/src/Repository/RepositoryList/RepositoryList.js:7
4 |
5 | import '../Repository.css'
6 |

7 | const RepositoryList = ({ repositories }) =>
8 | repositories.edges.map(({ node}) => (
9 |

10 | <RepositoryItem { ...node } />
View compiled
▶ 17 stack frames were collapsed.

So here is my code (I am omitting the repository.js code:

Here is index.js showing the Apollo configuration

`import 'dotenv/config';
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import './index.css';
import App from './App/App';
import * as serviceWorker from './serviceWorker';

// This is going to act as the 'server' and handle the
// Apollo code
const GITHUB_BASE_URL = 'https://api.github.com/graphql';
const GITHUB_API_KEY = process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN;

const httpLink = new HttpLink({
uri: GITHUB_BASE_URL,
headers: {
authorization: Bearer ${ GITHUB_API_KEY },
},
});

const link = ApolloLink.from([httpLink]);

const cache = new InMemoryCache();

const client = new ApolloClient({
link,
cache,
connectToDevTools: true,
});

ReactDOM.render(


,
document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();`

Here is my Profile.js

`import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

import Loading from '../Loading/Loading';
import RepositoryList from '../Repository/Repository';

const GET_REPOSITORIES_OF_CURRENT_USER = gql{ viewer { repositories( first: 5 orderBy: {direction: DESC, field: STARGAZERS} ) { edges { node { id name url descriptionHTML primaryLanguage { name } owner { login url } stargazers { totalCount } viewerHasStarred watchers { totalCount } viewerSubscription } } } } };

const Profile = () => (

{({ data, loading }) => {
if (loading || !data) {
return ;
}

    const viewer = data;
    
    return <RepositoryList repositories={viewer.repositories} />;
    }}
</Query>

);

export default Profile;`

and here is my RepositoryList.js which is where the error happens:

`import React from 'react';

import RepositoryItem from '../RepositoryItem/RepositoryItem';

import '../Repository.css'

const RepositoryList = ({ repositories }) =>
repositories.edges.map(({ node}) => (

<RepositoryItem { ...node } />

));

export default RepositoryList;`

It is probably a space or a missing comma somewhere, that is usually what issues i have ends up being.

I appreciate any feedback.

[petelc]

So I figured it out. there was another "layer" in the data. Meaning I couldn't pass viewer.repositories i had to pass viewer.viewer.repositories

[vpaul18]

So I figured it out. there was another "layer" in the data. Meaning I couldn't pass viewer.repositories i had to pass viewer.viewer.repositories<
What do you mean? viewer.viewer.repositories would translate into data.viewer.data.viewer.repositories.. , no? I am also having the same "Cannot read property 'edges' of undefined" , even after trying your solution

[jj-matos]

What I noticed is:

1. The original solution, renders OK, when you save the file.
2. However, when you refresh the page in the browser, all is cleared and the data doesn't render. The page becomes full white.
   By doing console.log(viewer), you can see the data object in the console in situation 1, while in situation 2 you can't.
   In both situations the same error appear on the console: "Uncaught TypeError: data is undefined" related with the Query component children.
   "Loading ..." never renders.