How to trigger a refresh?

[simkessy]

How would I trigger an update or requery of data?

I have a data table which I load with initial data I get using useFetch. Then in that table I have a modal to create a new item. I'm trying to re-load my dataTable when the new item is created.

I tried passing get as a prop to my form so on submit I'd call get() but get returns undefined.

This is what I have so far

  const { request, response, loading, error, data, get } = useFetch(
    `${apiPath}/mydata`,
    {
      // accepts all `fetch` options
      data: [] // default for `data` will be an array instead of undefined
    },
    []
  );

  const tableData = useMemo(
    () => (data || []).map(r => ({ ...r, questions: r.questions.length })),
    [data]
  );

  // Handle different api states
  // if (networkStatus === 4) return 'Refetching!';
  if (loading) return <p>Loading...</p>;
  if (error) throw Error(error);

  // React table requires memoized data
  // Return table with data
  return (
    <Box padding={1}>
      <ReactTable
        columns={columns}
        data={tableData}
        component={
          <FullScreenModal
            title="Create New ScoreCard"
            content={<ScoreCardForm toggleScorecardForm={toggleModal} />}
            open={isShowing}
            toggle={toggleModal}
            handleRefresh={get}
          />
        }
      />
    </Box>

[alex-cory]

There are a few ways.

onUpdate Only

  const { loading, error, data, get } = useFetch(`${apiPath}/mydata`, { data: [] })
  const mounted = useRef(false)
  // GET onUpdate
  useEffect(() => mounted.current ? mounted.current = false : get())

onUpdate and onMount

  const [filters, setFilters] = useState({}) // whenever updating
  const { loading, error, data } = useFetch(`${apiPath}/mydata?${encodeURI(filters.current)}`, { data: [] }, [filters])

Could you make a codesandbox reproducing the issue please?

[simkessy]

I ended up solving the issue, it's my fault. I was passing get to the wrong component. It's working perfectly now. Thank you.