score:1
Accepted answer
finally managed to solve the issue
interface wrappedcomponentprops<t> {
data: t
}
interface wrappercomponentprops<t, k> {
apolloresult: queryresult<t>;
wrappedcomponent: react.componenttype<wrappedcomponentprops<t> & k>;
componentprops: omit<k, keyof wrappedcomponentprops<t>>;
}
type componentprops<t, k> = react.propswithchildren<wrappercomponentprops<t, k>>;
export const apolloresultwrapper = <t extends object, k = {}>(props: componentprops<t, k>) => {
const sandbox = usesandboxcontext();
if (props.apolloresult.error) {
sandbox.logger.error('stuff broke', props.apolloresult.error);
return <errorcontent />
}
if (props.apolloresult.loading) {
return <pagespinner />;
}
if (!props.apolloresult.data) {
return <errorcontent />
}
return <props.wrappedcomponent
children={props.children}
data={props.apolloresult.data}
{...props.componentprops as k}
/>;
}
score:0
if the error is about <t extends object>
place try to change type casting <t extends object>
to .... as t extends object
https://www.typescriptlang.org/docs/handbook/jsx.html#the-as-operator
Source: stackoverflow.com
Related Query
- How to create a generic arrow function with react and typescript
- How to implement a generic arrow function as interface property in Typescript with React JSX
- How to test with jest and typescript with types a basic react function component
- Typescript React component with function overload and generic params
- How to create Generic event handler with React TypeScript
- How to create React Context that passes a function with Typescript
- How to create a signup form with React and Why won't a function be executed when called insight a form after input field?
- How create React Typescript component with required and optional values but required value without default value?
- How to create a div with arrow and divider for content such that they are aligned using react and css?
- How to create forms with React and Rails?
- React prop types with TypeScript - how to have a function type?
- How to use React with Typescript and SASS
- How to create a generic React component with a typed context provider?
- How to use jest.spyOn with React function component using Typescript
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- Create React App with TypeScript and NPM Link: Enums causing Module parse failed
- Is it possible to type a React function component with TypeScript without using arrow functions?
- Typescript React stateless function with generic parameter/return types
- How to create a custom equality function with reselect and Typescript?
- How to use emotion/styled with React and Typescript
- How to set up a chrome extension using React and TypeScript with multiple pages and entry points?
- react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?
- How to determine the order of css in my create react app build with webpack and customize-cra?
- How to handle typescript function overloading with React Props
- How to create a typescript decorator with react
- React - Arrow function vs bind() and event with argument
- How to use and specify Generic Hooks in React with Typescript?
- How to create generic typescript function that binds arguments for storybook control
- How to declare different state and props for subclasses on react with typescript
More Query from same tag
- How to import component from another project
- React reuse a component performing different get/post requests based on where used
- use of variable inside render function of react component
- state' is not defined no-undef in App.js file
- Form does not have data in FormData javascript
- React Redux source function ensureCanMutateNextListeners?
- OpenSSL Encrypt-Decrypt with CryptoJS
- How to prevent component from being re-rendered unnecessarily
- Sticky headers in react-virtualized
- Keeping a maximum length array, how do I remove old x length of old data while pushing in new data?
- TypeError: Failed to fetch - react js
- Tag picker onChange event not firing
- react call parent component method in child component, this in parrent method is undefined(typescript)
- How can I mock an `instanceof` test?
- React.js doesn't pick-up bootstrap formatting on buttons
- How can I loop an array in the inline style in jsx?
- Fluxible context and executeAction in child react components
- Material-UI Snackbar on React gets fixed to the bottom of the page
- reactjs -- adding more to state when compositing a component
- How do you write Jest tests for getInitialProps?
- React.js with ESlint settings
- React export React.createContext not defined
- How to display API data in a Table format in React JS
- Why do I have to put bundle.js script in html when running webpack-dev-server
- React: Conditional Render - "Cannot read property '0' of null"
- Calling an action in the mapStateProps
- React/Typescript: How to get json file data
- Special actions on React state variables
- What is wrong with the React components Route?
- How to keep the image previews of images that I have already uploaded upon re-render of Uppy instance in a React app