React-apollo: Server response was missing for query 'undefined'

[DanceParty]

I am just trying to query some data passing in my user's Id (AsyncStorage) on ReactNative

Here is the basic component + query where the data should be loading:

import React from 'react'
import { Text, View } from 'react-native'

import { gql, graphql } from 'react-apollo'

const WorkoutList = (props) => {
  if (props.data.loading) {
    return <Text>Loading...</Text>
  }
  if (props.data.error) {
    return <Text>Error {props.data.error.message}</Text>
  }
  console.log(props.id)
  if (props.data.user) {
    return (
      <View>
        {
          props.data.user.map(workout => {
            return (
              <Text>{workout.name}</Text>
            )
          })
        }
      </View>
    )
  } else {
    return null
  }

}

const userWorkoutsQuery = gql`
  query QueryUserWorkouts {
    User(id: $id){
      id
      division{
        id
        workouts {
          id
        }
      }
    }
  }
`

const WorkoutListWithData = graphql(userWorkoutsQuery, {
  options: ({ id }) => ({ variables: id }),
})(WorkoutList)

export default WorkoutListWithData

Here is the parent component passing the prop for the query:

import React from 'react'
import { AsyncStorage, StyleSheet, Text, View } from 'react-native'

// extra imports
import { Constants } from 'expo'
import { graphql, compose, gql } from 'react-apollo'

import HeaderBar from '../components/HeaderBar/HeaderBar'
import WorkoutListWithData from '../components/WorkoutList/WorkoutList'

// constants
import { GC_USER_ID } from '../utils/constants'

// data
//import { QUERY_USER_WORKOUTS } from '../../server/graphql/Workout/query'

import { getUserId } from '../utils/auth'


class WorkoutsPage extends React.Component {

  state = {
    workouts: [],
    userId: '',
    userIdLoaded: false,
  }

  async componentDidMount() {
    try {
      const userId = await AsyncStorage.getItem(GC_USER_ID) 
      this.setState({userId})
      this.setState(() => ({
        userIdLoaded: true
      }))
    }
    catch(e) {
      console.log('Error', e)
    }

  }

  render() {
    if (this.state.userIdLoaded) {
      console.log(this.state.userIdLoaded)
      console.log(this.state.userId)
      return (
        <View>
          <HeaderBar title="Workouts" />
          <View style={styles.container}>
            <WorkoutListWithData id={this.state.userId} />
          </View>
        </View>
      )
    } else {
      return null
    }

  }

}

const styles = StyleSheet.create({
  container: {
    marginTop: 70,
  },
})

export default WorkoutsPage

EDIT:

The schema that this is trying to query is this

type User @model {
  createdAt: DateTime!
  division: Division @relation(name: "UserOnCategory")
  email: String @isUnique
  firstName: String!
  id: ID! @isUnique
  lastName: String!
  password: String
  role: Role @relation(name: "UserOnRole")
  scores: [Score!]! @relation(name: "ScoreOnUser")
  updatedAt: DateTime!
}

I am really at a loss on what the error means and can provide any more information that would be needed. Thanks in advance to anyone who offers help :)

fyi I am using [email protected]

[Panoplos]

Try to change the query to:

const userWorkoutsQuery = gql`
  query QueryUserWorkouts($id: ID!) {
    User(id: $id){
      id
      division{
        id
        workouts {
          id
        }
      }
    }
  }
`

[DanceParty]

Thank you, I have moved on to a different solution, but thanks for a response! :)

[Taysafun]

What was the solution?

[andfs]

What was the solution?

[DanceParty]

Sorry, but if I remember correctly, I think I switched over and used firebase.