Cannot query field "..." on type "Query".GraphQL: Validation

I have a v simple set-up: a new redwood typescript project with a single sdl file and corresponding service file…

// api/src/graphql/rocketpool.sdl.js

import skipAuth from 'src/directives/skipAuth/skipAuth'

export const schema = gql`
  type RocketDepositPool {
    balance: BigInt!
  }

  type Query {
    getRocketDepositPool: RocketDepositPool! @skipAuth
  }
`
// api/src/services/rocketpool/rocketpool.ts

import Web3 from 'web3'
import RocketPool from '@rocketpool/api'

const web3 = new Web3('https://cloudflare-eth.com')
const RocketStorage = '0x1d8f8f00cfa6758d7bE78336684788Fb0ee0Fa46'
const rp = new RocketPool(web3, RocketStorage)

export const getRocketDepositPool = () => {
  const balance = rp.contracts
    .get('rocketDepositPool')
    .then((rocketDepositPool) => rocketDepositPool.methods.getBalance().call())

  return {
    balance,
  }
}

Testing the service via http://localhost:8911/graphql works

query GET_ROCKET_DEPOSIT_POOL {
  getRocketDepositPool {
    balance
  }
}

returns

{
  "data": {
    "getRocketDepositPool": {
      "balance": 1.434029522110714e+21
    }
  }
}

However, I’m struggling to get the same query working in a cell :confused:

// web/src/components/RocketdepositpoolCell/RocketdepositpoolCell.tsx

import type { RocketDepositPool } from 'types/graphql'
import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'

export const QUERY = gql`
  query GetRocketDepositPoolQuery {
    getRocketDepositPool {
      balance
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }: CellFailureProps) => (
  <div style={{ color: 'red' }}>Error: {error.message}</div>
)

export const Success = ({ balance }: CellSuccessProps<RocketDepositPool>) => {
  return <div>{JSON.stringify(balance)}</div>
}

Two problems with the above

  1. 'types/graphql' => Cannot find module ‘types/graphql’ or its corresponding type declarations. Should I update to '../../../types/graphql'?
  2. getRocketDepositPool { => Cannot query field “getRocketDepositPool” on type “Query”.GraphQL: Validation

I have tried lots of diff variations and searched online but nothing seems to work. If anyone has any ideas or suggestions, that would be most helpful. Thank you in advance.


// web/types/graphql.d.ts 

export type Query = {
  __typename?: 'Query'
  getRocketDepositPool: RocketDepositPool
  redwood?: Maybe<Redwood>
}

export type Redwood = {
  __typename?: 'Redwood'
  currentUser?: Maybe<Scalars['JSON']>
  prismaVersion?: Maybe<Scalars['String']>
  version?: Maybe<Scalars['String']>
}

export type RocketDepositPool = {
  __typename?: 'RocketDepositPool'
  balance: Scalars['BigInt']
}

export type GetRocketDepositPoolQueryVariables = Exact<{ [key: string]: never }>

export type GetRocketDepositPoolQuery = {
  __typename?: 'Query'
  getRocketDepositPool: { __typename?: 'RocketDepositPool'; balance: number }
}

In your Success component, the prop that will be available containing the result of the query will be named the same as the query itself, so I think it should be:

export const Success = ({ getRocketDepositPool }) => {
  return <div>{JSON.stringify(getRocketDepositPool)}</div>
}

I left off the type because I’m not a Typescript person and have no idea what that would be. :grimacing:

Thanks rob. Turns out it was working all along :man_facepalming: I thought it was a type issue - was trying to figure out the types - but then set-up a similar project not using typescript and faced the same issue.

So I then just plugged the cell into a page and it worked :tada:

Any idea how I can get rid of this GraphQL: Validation error??

Hmm, have you tried re-starting the dev server? We’ve seen some instances where the type generation misses a change. Or you can run yarn rw-gen manually and see if that fixes it?

1 Like

That appears to have worked. Thank you v much.