refetch autocomplete options
in my create page I'm using an mui autocomplete field. if it has no options to choose, there will show up a button to create an option which will redirect to another create page in a new window. once I submitted in new window it automatically closes and return back to original window. but here, the newly created option is not updated since we used different windows. any solution?
13 Replies
Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Refine documentation for more information on using MUI Autocomplete with Refine:
- Refine MUI Autocomplete Hook (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete)
- Refine MUI Create Component (https://refine.dev/docs/api-reference/mui/components/basic-views/create)
- Refine MUI Edit Component (https://refine.dev/docs/api-reference/mui/components/basic-views/edit)
These resources might help you find a solution to your problem.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------useAutocomplete | refine
useAutocomplete hook allows you to manage Material UI `` component when records in a resource needs to be used as select options.
Create | refine
`` provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.
Edit | refine
provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a
.<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
conscious-sapphire•16mo ago
@kapa.ai is there any way to update the autocomplete fields in create page?
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, you can update the Autocomplete field in the Create page by using the
useAutocomplete
hook provided by Refine. The hook fetches data using the useList
hook, so when the data is updated, the Autocomplete field will be updated as well.
Here's an example of how to use the useAutocomplete
hook in a Create page:
In this example, the useAutocomplete
hook is used to fetch data for the "categories" resource. When the data is updated, the Autocomplete field will be updated as well.
For more information, refer to the Refine MUI Autocomplete Hook documentation (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange•16mo ago
are you sending option to backend from new window ?
conscious-sapphire•16mo ago
No, not like that the usecase is
in the old window, my autocomplete is for selecting location, so if there is no location, it will redirect to new window to the create page for location
the resource location is used in the old window. now that it is got updated in the new window. but when coming back to old window, it doesn't know that an item is created in this resource.
genetic-orange•16mo ago
If i understand correctly, then the question is "in react how can i persist/share sate between diffrent brower pages"
this is very specific use case. i didn't tested but i came across this articles. you can try
https://www.joshwcomeau.com/react/persisting-react-state-in-localstorage/
https://javascript.plainenglish.io/a-react-hook-to-share-state-between-browser-windows-a672470f66ff
conscious-sapphire•16mo ago
I mean not persisiting or sharing, I just want my useAutocomplete hook to be refetched again
...when a new new option is created in new window
genetic-orange•16mo ago
you are sending to backend in new window, am i right ?
then i believe you can use this
https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching
for useTable you can use this.
all data hooks has queryOptions prop. you can give this option
conscious-sapphire•16mo ago
ok let me try this
@alicanerdurmaz this does not seems to be working.
ok somehow I managed to get a callback to the original when a new item is created in the new window. now I just need to update the useAutoComplete hook to fetch the latest option
@alicanerdurmaz given this properly and it worked.
really thankful for your help. appreciate it.
genetic-orange•16mo ago
im glad to hear that 🚀