I've encountered some challenges while attempting to link a React class component with my local Apollo cache data.
Following the guidelines outlined here, I have run into issues where VSCode and Webpack are generating errors when I try to access data using this syntax: this.props.data.playing. Despite the error prompts, the browser displays the correct data. However, if I access the data as this.props.data.data.playing, the typecheck passes but triggers an error in the browser console (
Cannot read property 'playing' of undefinedI would like to clarify that all NPM packages have been 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 } });
}
}
}
/** Additional methods such as render() have been omitted for brevity. */
}
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 };