Sending a function fron <input> onChange function

Question

My component:

class Admin extends React.Component {
  constructor(props) {
    super(props);
  }

  uploadFile = async (event, refetch) => {
    await uploadFileToBucket(event, true);
    refetch(); // refetch is undefined
  };

  render() {
    return (
     <GraphQlDataFetcher query={getObjectsInDefaultBucket()}>
        {(data, refetch) => (
           <Files files={data.bucketObjects}/>
            <input type="file" onChange={(refetch) => this.uploadFile(event, refetch)}/>

          )}
       </GraphQlDataFetcher>

    );
  }
}


export default Admin

When the file upload is complete, I want to refetch the graphql-query. So I need to send the refetch function up to my uploadFile. How do I do that?

Answer 1

I think that doing this:

<input type="file" onChange={ (refetch) => this.uploadFile(event, refetch) } />

you are overriding the refetch method passed by GraphQlDataFetcher, can you try doing this instead?

<input type="file" onChange={ event => this.uploadFile(event, refetch) } />