GraphQL query using React Native AsyncStorage -

i'm trying build component, using react native , apollo client execute following query:

query gettable($tableid:string!){    gettable(id:$tableid){       users{       name       imageurl    } } 

so, query above have variable called tableid , value stored using asyncstoragemethod. there way can value asyncstorage , use query variable.

i tried following didn't work:

graphql(query, {   options: {     tableid: await asyncstorage.getitem('table'),   }, })(mycomponent); 

in opinion, preferred way of doing this:

call asyncstorage.getitem() in parent component , pass result down prop mycomponent. as illustrated in docs, options can function instead of object, in case gets component's props passed first argument. so, assuming prop called tableid, hoc this:

graphql(query, { options: ({ tableid }) => ({ variables: { tableid } }) }) 

alternatively, could set query default value:

graphql(query, { options: { variables: { tableid : 'foo' } } }) 

you call asyncstorage.getitem() in component's componentdidmount() method , assign result component's state. component have data prop available when renders. can call this.props.data.refetch({ tableid: this.state.tableid }) render function force query update newly available id.

i think that's lot less clean first option, , require additional logic keep component calling refetch or rerendering unnecessarily... should still work if reason don't want change parent component.