Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot read property 'viewer' of undefined. #30

Open
ma-nish opened this issue Jan 20, 2020 · 6 comments
Open

TypeError: Cannot read property 'viewer' of undefined. #30

ma-nish opened this issue Jan 20, 2020 · 6 comments

Comments

@ma-nish
Copy link

ma-nish commented Jan 20, 2020

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
Copy link
Author

ma-nish commented Jan 20, 2020

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
Copy link

mejustdev commented Jun 18, 2020

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
Copy link

petelc commented Sep 11, 2020

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
Copy link

petelc commented Sep 12, 2020

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
Copy link

vpaul18 commented Aug 3, 2021

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
Copy link

jj-matos commented Mar 10, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants