0

My dependencies are:

"@apollo/react-hooks": "^3.1.1",
"apollo-boost": "^0.4.4",
"graphql": "^14.5.6",
"react": "^16.9.0",

My query calling React component is:

import React from 'react'
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const FEED_QUERY = gql`
  {
    session(session_id: $id) {
      session_id
      event_type
    }
  }
`

function SessionDetails() {
  const id = "web123";
  const { loading, error, data } = useQuery(FEED_QUERY, {
    variables: { id },
  });
  console.log(error)
  console.log(data)

  if (loading) return <div>Fetching</div>
  if (error) return <div>Error</div>

  const sessionsToRender = data.session

  return (
    <div>
      {sessionsToRender.map(session => <Session key={session.session_id} session={session} />)}
    </div>
  )
}

I am getting error as "Network error: Response not successful: Received status code 400" and my data is undefined. The query is working properly in the GraphQL playground but not in the app. It seems that id is not being replaced. How do I fix it?

From Google Dev Console

khateeb
  • 5,265
  • 15
  • 58
  • 114
  • The query is working in there but it not working here. – khateeb Sep 19 '19 at 07:22
  • @HMR I got `Variable "$id" is not defined` from graphiql. – khateeb Sep 19 '19 at 07:28
  • @HMR I managed to do what you asked. From my web app, the id field is not being replaced while in graphql because I am sending a constant value it is being sent properly. – khateeb Sep 19 '19 at 07:59
  • @HMR I have done that. – khateeb Sep 19 '19 at 08:32
  • 1
    Duplicate of [GraphQl variable using grapiql - variable is undefined](https://stackoverflow.com/questions/54293234/graphql-variable-using-grapiql-variable-is-undefined) – Daniel Rearden Sep 19 '19 at 16:38
  • Any variable you use must first be declared as part of your operation definition. See [here](https://stackoverflow.com/questions/54293234/graphql-variable-using-grapiql-variable-is-undefined). – Daniel Rearden Sep 19 '19 at 16:39
  • @DanielRearden I did what that answer said to do and it solved that problem. But then another error message pooped up `Variable "$id" of type "String" used in position expecting type "String!`. Only removing `!` from `String`, it worked. Why was this problem occurring even though I gave an actual id and not a blank one? – khateeb Sep 20 '19 at 10:22
  • if he field is nullable, the variable can be nullable or non-nullable. If the field is non-nullable, the variable must be too. – Daniel Rearden Sep 20 '19 at 11:54
  • @DanielRearden How do I make a variable in JS non-nullable? – khateeb Sep 20 '19 at 11:57
  • 1
    The same way you make a field non-nullable in SDL -- by appending the `!` to the type. – Daniel Rearden Sep 20 '19 at 11:58
  • @DanielRearden Ah, I got it. You meant in the gql. I thought you meant in JS. – khateeb Sep 20 '19 at 12:04

0 Answers0