data is undefined

[princencu94]

Hi Yihua mmm i ran into a problem, well i guess with the versions that i have in my package.json i keep running into the error data is undefined, even tried using Hooks but i can't seem to crack it.

[juicecultus]

Same problem here & it's not package.json - the code is wrong as the error briefly appears on the screen of Yiihua during the course itself but he fails to address it?!?...

[juicecultus]

@ZhangMYihua the code below works

[juicecultus]

@princencu94 here is a working code:

...

const CollectionPageContainer = ({ match }) => (
  <Query
    query={GET_COLLECTION_BY_TITLE}
    variables={{ title: match.params.collectionId }}
  >
    {({ loading, data }) => {
      if (loading) return <Spinner />;
      const { getCollectionsByTitle } = data;
      return <CollectionPage collection={getCollectionsByTitle} />;
    }}
  </Query>
);

...

[princencu94]

@juicecultus Wsup i tried that before i posted the issue and kept on getting the error so i guess it could
be that i am not loading any data from the server because i see my console is saying something about Cors Access denied

[juicecultus]

@princencu94 could be, sort CORS first then, make sure it's loaded highest up in the list of app.use()

[IlyaMrz]

Yeah, looks like we should destruct collection only after we got it

const CollectionPageContainer = ({match}) => (
    <Query query={GET_COLLECTION_BY_TITLE} 
    variables={{title: match.params.collectionId}}>
        {
          ({ loading, error, data}) => {
            console.log({loading})
            console.log({data})
            console.log({error})
            if (loading) return <Spinner />
            return <CollectionPage collection={data.getCollectionsByTitle} />
           }
        }
    </Query>
)

[hazartilirot]

I've just had the same issue with it though I figured out that something with restructuring data object since the previous container worked perfectly well.

Dunno, why people don't like to use a concise expression as a ternary operator

({loading, data}) => loading 
        ? <Spinner />
        : <CollectionPage collection={data.getCollectionsByTitle} />
    }

as for Query it's possible to use a useQuery hook.

npm install @apollo/react-hooks

then import it into your file

import {useQuery} from '@apollo/react-hooks'

mind, you should do the same for Provider in index.js (just import it from "@apollo/react-hooks") that's... the rest - do as a docs says.