I am fetching data from my api using RTK Query like this

```
    export const coinApi = createApi({
  reducerPath: 'coinApi',
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCoins: builder.query({
      query: () => createRequest(`/watchlist`),
    })

  }),
});

```

and im deleting a coin from my table like this

```
export const deleteCoin = (id) => async (dispatch, getState) => {

try {
    dispatch({
      type: COIN_DELETE_REQUEST,
    });

    await axios.delete(`/api/coins/watchlist/${id}`);

    dispatch({
      type: COIN_DELETE_SUCCESS,
    });
  } catch (error) {
    const message =
      error.response && error.response.data.message
        ? error.response.data.message
        : error.message;
    dispatch({
      type: COIN_DELETE_FAIL,
      payload: message,
    });
  }
};

```

and in my frontEnd component: I am calling dispatch(deleteCoin(id));

the delete functionality is working, since in my database it is removed however the component does not refresh so the coin still exists on the UI unless I refresh the page myself manually.

I've tried accessing the global data from the RTK query, but cannot do it successfully
I was trying to use useEffect and pass in the dependency data from

const { data, isFetching } = useGetCoinsQuery();

However its still not reloading my component?
How else can i reload my component? This is my first time using RTK Query so I'm not sure how to really access that data and how can it listen to data changes in teh API server?
Thanks

```
 const coins = useSelector((state) => state.coinApi.queries)
  const {
    loading: loadingDelete,
    error: errorDelete,
    success: successDelete,
  } = coinDelete;

  useEffect(() => {}, [dispatch, successDelete, data]);

  if (isFetching) return <Loader></Loader>;

  const deleteHandler = (id) => {
    if (window.confirm('Are you sure?')) {
      dispatch(deleteCoin(id));

    }
  };

```