New to RTK Query, having an issue w/ a particular use case to clear query cache.

[dyoung404]

I will admit it's likely I've missed some key clue in the RTK query documentation...but I can't seem to find the right solution to this use case and need some guidance. We use RTK for our client state management.

We have two components: <Typeahead /> and <AssociationsList />;

const EntitiesTypeahead = () => {
    const dispatch = useDispatch();
    const { search } = useSelector(state => state.filters);
    const { data: entities } = useGetEntitiesQuery();

    return (
        <Typeahead
            id="entitiesTypeahead"
            name="entity_id"
            options={entities}
            onChange={([selection]) => {
                dispatch(setFilters({ search: selection?.value || '' }));

                if (!isValidSearch(selection?.value)) {
                    dispatch(api.util.invalidateTags([{ type: 'Associations', id: search }]));
                }
            }}
        />
    );
};

export default EntitiesTypeahead;

const AssociationsList = () => {
    const dispatch = useDispatch();

    /* Selectors */
    const permissions = useSelector(state => state.permissions);
    const { search = '' } = useSelector(state => state.filters);
    const { data = [], isLoading, isFetching } = useGetAssociationsQuery(search, { skip: !isValidSearch(search) });
    const showLoading = (isLoading || isFetching);
    const showGrid = !showLoading && data.length > 0;

    /* EventHandler */
    const onDelete = row => {
        dispatch(batchActions([
            setShowConfirmDialog(true),
            setAssociationToDelete(row)
        ]));
    }

    /* Check user permissions */
    const hasPerms = canDeleteAssociation(permissions.userPerms);

    /* Get grid data objects */
    const columns = getColumns({ data, hasPerms })
    const rows = getRows({ data, hasPerms, onDelete });

    /* Return the component */
    return (
        <>
            <Loading
                spinnerSize={48}
                show={showLoading}
                label="Fetching Associations"
                style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}
            />
            {
                showGrid ? (
                    <div data-testid="AssociationsGridContainer">
                        <Table
                            fullWidth
                            preservePadding
                            rows={rows}
                            columns={columns}
                        />
                    </div>
                ) : null
            }
            <DeleteConfirm
                hasPerms={hasPerms}
            />
        </>
    );
}

export default AssociationsList;

We're using API code splitting so we can colocate the APIs for each feature in their respective directories.

export const coreApi = createApi({
    baseQuery: fetchBaseQuery({
        baseUrl: '/',
        prepareHeaders: (headers, { getState }) => {
            return getSharedFetchParams().headers
        }
    }),
    tagTypes: [
        'Entities',
        'Associations'
    ],
    endpoints: () => ({})
});

export const apiUtils = coreApi.util;

export const associationsApi = coreApi.injectEndpoints({
    endpoints: builder => ({
        getEntities: builder.query({
            query: () => `entities/typeahead_options`,
            providesTags: ['Entities']
        }),
        getAssociations: builder.query({
            query: (id) => `associations/search?id=${id}`,
            providesTags: (response = []) => [
               ...response.map(({ id }) => ({ type: 'Associations', id })),
               { type: 'Associations', id: 'LIST' }
            ],
            async onQueryStarted(id, { dispatch, getState, queryFulfilled }) {
                // some potential global notifications or sideEffects
            }
        }),
        deleteAssociation: builder.mutation({
            query: (association) => ({
                url: association.delete_url,
                method: 'DELETE'
            }),
            invalidatesTags: ['Associations'],
            async onQueryStarted(id, { dispatch, getState, queryFulfilled }) {
                // some potential global notifications or sideEffects
            }
        })
    })
});

export const {
    useGetEntitiesQuery,
    useGetAssociationsQuery
} = associationsApi;

So, the typeahead component populates a list of entities when it mounts via the RTK Query. We don't want the AssociationsList to execute the RTK Query when it mounts because a call to the endpoint without an id is not a valid request to that endpoint, so there's no reason to make the unnecessary call. From the documentation, it seems that using the skip prop here is the recommended way to short circuit this behavior.

When a user selects an entity from the typeahead, we dispatch a global event to set a top level filters object that is consumed by several sibling components via selectors. Those components react to specific changes in the filters object for their respective renders (page, size, sort, search, etc). The associations list component listens for a change in the search param, and makes the RTK Query when the search is valid (since skip will evaluate to false).

So far, so good. This all works as expected

Here's the problem: When a user clears the typeahead field, the search param is updated to an empty string, which fails the validator, which prevents the useGetAssociationsQuery from executing. Which is actually what we want. As I mentioned earlier, a call to this endpoint without a valid search value is not a valid request. I don't need the query to make an unnecessary call to the endpoint.

My question is: How can I force the <AssociationList /> component to clear the cached data from the last use of useGetAssociationsQuery using RTK Query while simultaneously preventing an invalid call to the endpoint?

You can see in the typeahead component that I tried to invalidate the tags passed to the api by using the api.util.invalidateTags. This didn't work, and I think I understand why. Since we prevent the query from executing via the skip property, I'm assuming (if I understand the documentation correctly) that invalidating the tag is supposed to trigger a refetch, and we are deliberately short circuiting that functionality by providing the skip property. So no update to the data prop.

I did notice while monitoring state that about a minute or so after I dispatched the invalidateTags event, the store state did update, and the query was removed. Is there a way to invalidateTags immediately, but only for a single instance of a dispatched event? (I don't want to override the default w/ a global setting).

Additionally, setting a conditional key on the <AssociationList /> component that resets when the typeahead is cleared does, in fact, reset the component, but obviously does not update the cache state, so that doesn't feel like a solution, since anything else relying on that data to be an empty array also won't update.

This is all pretty easily achieved using asyncThunks and selectors, but I'm trying to reduce the amount of boilerplate that we have to write for simple data connected components. For whatever reason, I just can't seem to wrap my head around what the RTK Query solution to this issue is...or if I'm just not structuring my components properly? Any help / guidance you can provide would be most helpful.

Separately - Speaking of selectors, if I understand the documentation correctly (and again, I may not), the useGetAssociationsQuery() hook replaces the need to create selectors for the things it offers, since you get the data and all the status and error data as part of the query response? So, is it a valid pattern to have useGetAssociationsQuery() hook in every component that needs to react to changes in the data underlying that query, similar to how selectors work now?

For example, if I need to display a <NoRecords /> component that displays if 0 results are returned:

const NoRecordsFound = () => {
    const { search = '' } = useSelector(state => state.filters);
    const { data = [], isLoading, isFetching } = useGetAssociationsQuery(search, { skip: !isValidSearch(search) });
    const show = (!isLoading || !isFetching) && isValidSearch(search) && data.length === 0;

    return (
        <Alert
            alertType={alertTypes.INFO}
            noShadow
            show={show}
            style={{
                backgroundColor: '#c1e8ff'
            }}>
            No records were found matching your search.<br />
            <RefreshSearchField />
        </Alert>
    )
};

export default NoRecordsFound;

Thanks for reading to the end.

[phryneas]

I'm sorry, this is a lot to take in, I believe you're a step ahead with your specific solution here, and maybe asking a "XY problem question".

What's your main concern here? Is it really clearing cache values or do you just want to have the current value for the current query? Have you taken a look at currentData?

[dyoung404]

Yeah, I realize it's a lot. Honestly wasn't sure how much detail would be needed.

I genuinely thought the issue was invalidating the cache not triggering the useQuery hook because of the conditional skip arg. But you know, the one thing I did not inspect was currentData? 🤦

So, your question led me to this: #2861

So, I guess a clarifying question: If I have a useQuery with a skip arg -- will currentData always return undefined if skip: true?

(Separately, I can clean up the original question and remove all that verbosity if you'd prefer to keep the Q&A more simple)