I am currently working on developing a versatile wrapper component for Apollo GraphQL results. The main objective of this wrapper is to wait for the successful completion of the query and then render a component that has been passed as a prop. The component passed in should have props of type QueryResult<T>.
When I run this snippet of code, I encounter an error at Column 66 which states:
Cannot find name 'T'.ts(2304)
import React from 'react';
import { QueryResult } from 'react-apollo';
import { useSandboxContext } from 'src/js/shared/components/SandboxContext';
import { ErrorContent } from 'src/js/shared/components/ErrorContent';
import { PageSpinner } from 'src/js/shared/components/PageSpinner';
interface WrapperComponentProps<T> extends QueryResult<T> {
// TODO: determine how to specify that the wrapped component takes the results
// Perhaps something like this `React.ReactType<QueryResult<T>>` but it triggers errors
wrappedComponent: React.ReactType;
}
// Receiving an error from `React.FC<WrapperComponentProps<T>>`
// `Cannot find name 'T'.ts(2304)`
export const ApolloResultWrapper: React.FC<WrapperComponentProps<T>> = <T extends object>(props: WrapperComponentProps<T>) => {
const sandbox = useSandboxContext();
if (props.error) {
sandbox.logger.error('query failed', props.error);
return <ErrorContent />
}
if (props.loading) {
return <PageSpinner />;
}
if (!props.data) {
return <ErrorContent />
}
// TODO: determine how to spread all the props except wrappedComponent
return <props.wrappedComponent {...props} wrappedComponent={undefined} />;
}