使用 graphql 将道具传递给高阶组件时，React-apollo Typescript 错误

Question

I'm running into some issues trying to connect a React class component to my Apollo cache data, which for now is just local.

I'm following the docs from here , but I'm running into trouble where VSCode and Webpack are throwing errors when I access data like this: this.props.data.playing , which is how I'd expect to access it. Despite this, in the browser this returns the correct data. However if I access data like this: this.props.data.data.playing the typecheck passes but throws an error in the browser console ( Cannot read property 'playing' of undefined ). So I'm reasonably sure this is a type definition error, but I'm not sure where I'm going wrong.

I should point out that NPM and all packages are updated.

type AudioData = {
  bpm: number;
  beatsPerBar: number;
  playing: boolean;
  metronomeSound: string;
  playPosition: number;
  playStartTime: number;
};

type Response = {
  data: AudioData;
};

class ConnectedWorkspaceAudio extends React.Component<
  ChildProps<{}, Response>
> {
  _context: AudioContext;
  _scheduler: Scheduler;
  _recorder: Recorder;

  constructor(props: ChildProps<{}, Response>) {
    super(props);
  }

  componentDidMount(): void {
    /***/
  }

  componentDidUpdate(prevProps: ChildProps<{}, Response>): void {
    console.log(this.props.data.playing); // Fails type check, prints correctly in browser.
    if (this.props.data.data) {
      if (this.props.data.data.playing && !prevProps.data.data.playing) { // Passes type check, gives console error in browser.
        useApolloClient().writeData({ data: { playing: true } });
      }
      if (!this.props.data.data.playing && prevProps.data.data.playing) {
        useApolloClient().writeData({ data: { playing: false } });
      }
    }
  }

  /** There's some more methods including render() I don't believe are relevant. */
}


const WORKSPACE_AUDIO_QUERY = gql`
  query AudioState {
    bpm @client
    beatsPerBar @client
    playing @client
    metronomeSound @client
    playPosition @client
    playStartTime @client
  }
`;

const WorkspaceAudio = graphql<{}, Response>(WORKSPACE_AUDIO_QUERY)(
  ConnectedWorkspaceAudio
);

export { WorkspaceAudio };

Answer 1

This is not typing error - typical error for trying access to not ready data - usually in render() , when data not arrived yet.

Place console log after if (this.props.data.data) { ... and bad logging argument, should be console.log(this.props.data.data.playing); - response named data (a bit missleading).

Answer 2

The solution here was to not wrap the AudioData type into Response , despite the fact that they use that pattern in the documentation. I updated the following lines:

class ConnectedWorkspaceAudio extends React.Component<
  ChildProps<{}, AudioData>
{
...

const WorkspaceAudio = graphql<{}, AudioData>(WORKSPACE_AUDIO_QUERY)(
  ConnectedWorkspaceAudio
);