How to query graphQL with variables from React-Native?

Question

I can't find the problem in my code when trying to query with variables from react-native. A simple Hello World! is working.

The render:

render() {
    return (
      <AppContext.Consumer>
        {context => {
        const{  userID,employeeID,salonID,currentDay,serviceTime}=context.state
          return (
            <Query
              query={query}
              variables={{userID:userID,employeeID:employeeID,salonID:salonID,day:currentDay,serviceTime:serviceTime}}
            >
              {(response, error) => {
                console.log(`response: ${response.data.listOfAppointments}`);
                console.log(`EMPL: ${response.data.employeeInfo}`);
                console.log(`\helo: ${response.data.hello}`);
                return (
                  <Grid>
                    <Col>
                      <MyHeader
                        navigation={this.props.navigation}
                        title={context.state.currentDay
                          .format("DD.MM.YYYY")
                          .toString()}
                      />
                      {!response.data.listOfAppointments? (
                        <CircularProgress />
                      ) : (
                        <ScheduleList data={response.data.listOfAppointments} />
                      )}
                    </Col>
                  </Grid>
                );
              }}
            </Query>
          );
        }}
      </AppContext.Consumer>
    );
  }

The Query:

const query =gql`
    query Query($userID:String!,$employeeID:String!,$salonID:String!,$day:Int!,$serviceTime:Int){
      hello
        listOfAppointments(
          userID: $userID
          employeeID: $employeeID
          salonID: $salonID
          day: $day
          serviceTime: $serviceTime
        ) {
          start
          end
          status
          disabled
        }
        employeeInfo(employeeID: $employeeID
          salonID: $salonID){
            token
            name
            ID
            notifyWhenCreated
            notifyWhenDeleted
            salonName
          }
      }
    `;

The schemas and types:

If I delete listOfAppointments,employeeInfo and the part where I declare the variables the hello is working. Otherwise it's giving me status code: 400

react-native log-android is not throwing anything. If I try to console.log() the result it's undefined.

Thanks!

score 0 · Accepted Answer · answered Jul 19 '19 at 11:14

A status code of 400 usually means the query itself is invalid. It could be that the query has a syntax error, or is somehow not passing validation. To get the detailed response from the server, you can either 1) observe the actual response from the server in the network tab of your browser or 2) capture the error from the component itself.

<Query /* props */>
  ({ data, error }) => {
    console.log(error)
    return null
  }
</Query>

Note that we're only dealing with the first parameter in the render props function and just using destructuring to get its data and error properties.

As far as I can tell, your query does not have any syntax errors, so I suspect the issue is that some or all of the variables you are passing in are in fact undefined, which will cause your query to blow up if any of them are marked as non-null inside the query.

The `day` variable was string instead of int, I managed to get status code 200, but still nothing is in the response. I got this `Error: unsupported BodyInit type` — Bojke, Jul 19 '19 at 11:51
It was because network inspect was enabled. Thanks! The debugger helped me a lot — Bojke, Jul 19 '19 at 11:59

How to query graphQL with variables from React-Native?

1 Answers1