I'm following the Substrate Kitties tutorial, and I've run into some problems getting the front end working.

The backend node seems to be working just fine, but this code snippet for the front end:

// Subscription function for kitty count
const subscribeCount = () => {
  let unsub = null
  const asyncFetch = async () => {
    unsub = await api.query.substrateKitties.countForKitties(
      async count => {
        // Fetch all kitty keys
        const entries = await api.query.substrateKitties.kitties.entries()
        const ids = entries.map(entry => entry[1].unwrap().dna)
  return () => {
    unsub && unsub()

throws an exception:

Kitties.js:26 Uncaught (in promise) TypeError: api.query.substrateKitties.countForKitties is not a function
    at asyncFetch (Kitties.js:26:1)
    at subscribeCount (Kitties.js:34:1)
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)

I first followed the tutorial carefully, and to ensure I didn't mess anything up, I cloned the backend and frontend repos and switched to the tutorials/solutions/kitties branch. Same error.

Is the front end code out of date?

Thanks for your help!

  • Are you sure you are running the correct node with the Substrate Kitties pallet in it? That error implies you might be running an old node without the kitties pallet.
    – Shawn Tabrizi
    Apr 4, 2022 at 15:39
  • I don't think so because the createKitty callable works just fine. When I click the button labelled "Create Kitty" everything works as expected, and I can see the newly created kitty on-chain by viewing "Storage" in the "Chain state" section of the portal at polkadot.js.org. Apr 4, 2022 at 16:29
  • 2
    Can you go into your code and see if this line exists?
    – Shawn Tabrizi
    Apr 4, 2022 at 17:59
  • 1
    It didn't! Thank you so much, I appreciate the great tutorial and amazing support. Apr 4, 2022 at 23:32

1 Answer 1


@Shawn is right. Unfortunately in the kitties tutorial part I, some snippets still use the deprecated kitty_cnt method (as below) to get the number of stored kitties. This last is probably why you are getting the error: Your Frontend is trying to reach a getter method that does not exists. However, the repos you described above are properly updated and both implement the right matching method: countForKitties.

#[pallet::getter(fn kitty_cnt)]
pub(super) type KittyCnt<T: Config> = StorageValue<_, u64, ValueQuery>;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.