Expected type variable to be an object using Apollo


#1

Hi all!

I have a working query in GraphQL Playground that I’m trying to get to work using Apollo. I can’t seem to pass a variable properly to the query.

Here’s my code:

public render() {
  const CONVERSATION = gql`
    query GetConversation(
      $conversationId: ConversationWhereUniqueInput!
    ) {
      conversation(where: $conversationId) {
        id
        title            
      }
    }
  `
  const conversationId: any = this.props.conversation
  console.log(conversationId) // works.

  return (
    <ApolloProvider client={this.client}>
      <div>
        <Query query={CONVERSATION} variables={{ conversationId }}>
          {({ loading, error, data }) => {
            if (error) {
              return <div>${JSON.stringify(error)}</div>
            }
            if (loading) {
              return <div>Loading...</div>
            }
            return <div>{JSON.stringify(data)}</div>
          }}
        </Query>
      </div>          
    </ApolloProvider>
  )
}

The error message I get is:

${“graphQLErrors”:[],“networkError”:{“name”:“ServerError”,“response”:{},“statusCode”:400,“result”:{“errors”:[{“message”:“Variable “$conversationId” got invalid value “cjrtfagwc00bq0a300njz594r”; Expected type ConversationWhereUniqueInput to be an object.”,“locations”:[{“line”:1,“column”:23}]}]}},“message”:“Network error: Response not successful: Received status code 400”}

[GraphQL error]: Message: Variable “$conversationId” got invalid value “cjrtfagwc00bq0a300njz594r”; Expected type ConversationWhereUniqueInput to be an object., Location: [object Object], Path: undefined

I thought that by passing my variable as variables={{ conversationId }} I was actually passing an object as requested. What am I doing wrong?

Thanks


#2

Hi @gregoryforel

Looks like you are typing the variable wrong. Try this instead:

 query GetConversation(
      $conversationId: ID!
    ) {
      conversation(where: $conversationId) {
        id
        title            
      }
    }

If this is still causing an error, please share the resolver code for this query as well.


#3

Hi @pantharshit00,

Thanks for answering. I still have an issue:

${“graphQLErrors”:[],“networkError”:{“name”:“ServerError”,“response”:{},“statusCode”:400,“result”:{“errors”:[{“message”:“Variable “$conversationId” of type “ConversationWhereUniqueInput!” used in position expecting type “ID”.”,“locations”:[{“line”:1,“column”:23},{“line”:2,“column”:28}]}]}},“message”:“Network error: Response not successful: Received status code 400”}

[GraphQL error]: Message: Variable “$conversationId” of type “ConversationWhereUniqueInput!” used in position expecting type “ID”., Location: [object Object],[object Object], Path: undefined

Here’s all my code:

resolver:

export const conversation = (
	parent: any,
	{ where: { id } }: { where: ConversationWhereUniqueInput },
	{ prisma }: Context
): ConversationPromise => {
	return prisma.conversation({ id })
}

ConversationWhereUniqueInput is automatically generated by Prisma:

type ConversationWhereUniqueInput = Partial<{
  id: string | number;
}> & Pick<{
  id: string | number;
}, "id">

Query:

const CONVERSATION = gql`
  query GetConversation(
    $conversationId: ConversationWhereUniqueInput!
  ) {
    conversation(where: { id: $conversationId }) {
      id
      title          
    }
  }
`

Apollo use:

const conversationId: string = this.props.conversation
<Query query={CONVERSATION} variables={{ conversationId }}>
...

thanks again or helping me


#4

I changed to const conversation: { id: string } = { id: this.props.conversation } and it worked