[Web] Export useApolloClient for one-off queries

[RobertBroersma]

Sometimes I need access to the Apollo client for instance to do one-off queries or to pass a query as a service to xstate. I don't see a way to do this with hooks.

Another use-case I came across today is using with react-select, which requires you to pass a function to retrieve select options. In said (async) function you call a callback (or resolve a promise) with the available options. This would get very weird if those options were coming from an Apollo hook (say useLazyQuery).

Is there a reason not everything is re-exported from the @apollo/react-hooks package? I assume to keep the bundle small, but in theory those unused things should be tree-shaken, right?

[peterp]

Thanks!

[ryancwalsh]

@RobertBroersma I'm trying to use AsyncCreatableSelect from https://react-select.com/creatable in RedwoodJs and am wondering how you achieved it.

I created a cell called TagsAutocompleteCell and am using that instead of promiseOptions, but it doesn't fetch the data and is clearly wrong.

I'd very much appreciate any hints! Thanks!

[RobertBroersma]

Hey @ryancwalsh, I'm also using an AsyncCreatable. I struggled quite a bit with the inner workings of react-select so it might seem a bit hacky, but it works.

I think you could achieve it with a Cell, using Apollo's refetch.

Here's my code:
https://gist.github.com/RobertBroersma/236377c7c6c14fcbb15f8afa87ce7eed

[ryancwalsh]

@RobertBroersma WOW, thank you so much! Following your example, I was able to get the correct tags to appear in my AsyncCreatableSelect: https://gist.github.com/ryancwalsh/bb05de34cfc76497c4a1a9c065e4dab1

Next I'll be figuring out:

1. how to get the "creatable" part working so that new tags get persisted to the DB
2. how to use the selected tag IDs upon form submission to create new PostTag records in the joiner table (associated with the new post that is being created).

Thanks again. :-)

[RobertBroersma]

@ryancwalsh Glad I could help!

Fwiw, I was messing around with connect, create, disconnect, etc... as well on my TagField, but in the end decided it's easier to just pass an array of strings to the backend, let the backend findOrCreate them and assign them to the model you're editing.

For now I created my own findOrCreate function, but if I'm not mistaken, Prisma is gonna work that in in the future!