Error on service event.data

[obtuse sonnet]

https://stately.ai/viz/338dfc4e-86cb-4392-9d73-9fe53baf0287
I added my visualization here as it is a typescript error

note: I added schema service type and still getting this error

• The first image shows my typescript error:
  Property 'data' does not exist on type 'ClubAuthEvent'.
  Property 'data' does not exist on type '{ type: "LOGIN"; }'.(2339)

• The second image shows the service type I added by following the docs typescript:
  https://xstate.js.org/docs/guides/typescript.html#typing-promise-services

• The third image is my service, its pretty simple

Please help, Ik i can ignore it and go further but it itches me in my heart to do so.

[obtuse sonnet]

i'd like to add that my typed event type clubAuthEvent isn't working at all

[stark rose]

I think you need to use typegen to get proper typing on services: https://xstate.js.org/docs/guides/typescript.html#typegen

See if this example works for you.

createMachine(
  {
    predictableActionArguments: true,
    id: 'club',
    initial: 'loggedOut',
    tsTypes: {},
    schema: {
      services: {} as {
        getClubsList: {
          data: ClubType[] | string;
        };
      },
      context: {} as ClubAuthContext,
      events: {} as ClubAuthEvent,
    },
    states: {
      loggedOut: {
        on: {
          LOGIN: {
            target: 'gettingClubsList',
          },
        },
      },

      gettingClubsList: {
        invoke: {
          src: 'getClubsList',
          onDone: {
            target: 'displayingClubsList',
            actions: 'addClubsListToContext',
          },
          onError: {
            target: 'displayingError',
            actions: 'addErrorMsgToContext',
          },
        },
      },

      displayingClubsList: {
        on: {
          SELECT_CLUB: {
            target: 'promtEnterPassword',
            actions: 'addClubToContext',
          },
        },
      },

      displayingError: {
        on: {
          RETRY: {
            target: 'loggedOut',
            actions: 'clearErrorMsgFromContext',
          },

          RETRY_PASSWORD: {
            target: 'promtEnterPassword',
            actions: 'clearErrorMsgFromContext',
          },
        },
      },

      promtEnterPassword: {
        on: {
          VALIDATE_AUTH: 'validatingAuth',
        },
      },

      validatingAuth: {
        invoke: {
          src: 'validateAuth',
          onDone: 'authSuccessful',
          onError: 'displayingError',
        },
      },

      authSuccessful: {
        entry: 'clearPasswordFromContext',
        type: 'final',
      },
    },
  },
  {
    services: {
      getClubsList: async () => await getClubsListQuery(),
    },
    actions: {
      addClubsListToContext: (context, event) => {
        console.log(event.data);
      },
    },
  }
);

[obtuse sonnet]

if i do that, i get this error

should I not use typestates

ohh, i think i can't use typestates with the current stable npm version

is that it?

yes, thats it, I solved my errors, thank you @stark rose for pushing me in the right direction

I am using v4.35 and typestates need v4.7, i assumed that if it is in the docs official then it must be the latest stable version...

anyways, thanks, marking this discussion as solved...

[stark rose]

Happy that it got you unblocked. Using typegen you don't provide any generic type params at all, and it should still work - magic 🪄

We don't recommend typestates anymore - #1049170482445959188 message

We hope to have a better solution for this in XState v5.