Search code examples
reactjsreduxrtk-query

RTK Query cannot set tag id

I am trying to setup RTK Query and have some troubles with defining a tag-id.

No matter what I try, I cannot seem to make the "Timeseries" tag work with an id.

Here is my api:

export type GetTimeseriesProps = {
    datasource: InsightshubDataSource
    from: string,
    to: string
}
export const valuesightApi = createApi({
    reducerPath: "valuesightQuery",
    baseQuery: fetchBaseQuery({ baseUrl: import.meta.env.VITE_VALUESIGHT_BACKEND_URL }),
    tagTypes: ['Dashboard', 'Timeseries'],
    endpoints: (builder) => ({
        getDashboardById: builder.query<Dashboard, void>({
            query: (id) => `/vsapi/Dashboard/${id}`,
            providesTags: (result, error, arg) => [
                { type: 'Dashboard', id: Number(arg) },
            ]
        }),
        getTimeseriesFromTo: builder.query<TimeSeriesData[], GetTimeseriesProps>({
            query: (props) => ({
                url: `/vsapi/Timeseries/${props.datasource.assetId}/${props.datasource.aspectName}/${props.datasource.variableName}`,
                method: 'GET',
                params: {
                    from: props.from,
                    to: props.to
                }
            }),
            providesTags: (result, error, arg) => [{
                type: 'Timeseries',
                id: String(arg.datasource.assetId)
            }]
        }),

    }),
});

Whenever I make a new Timeseries query, it automatically gets the entire parameter (arg) object as id, NOT just the arg.datasource.assetId.

This works fine with the dashboard however as I can see in the RTK Query tab in the extension:

enter image description here

So the same thing happens if I dont provide an Id, so it seems like it cant parse the args for some reason

Solution

  • The tags are only used for query/mutation endpoint validations.

    See:

    The query endpoints can provide specific tags, and the mutation endpoints can invalidate them and trigger queries to automatically re-run.

    What you are looking at in the Redux-Devtools however are not the tags, these are the query cache keys. The cache keys are part of Redux-Toolkit Query's "publish/subscribe" mechanism.

    See serializeQueryArgs:

    By default, this function will take the query arguments, sort object keys where applicable, stringify the result, and concatenate it with the endpoint name. This creates a cache key based on the combination of arguments + endpoint name (ignoring object key order), such that calling any given endpoint with the same arguments will result in the same cache key.

    Here I've marked the provided cache tags in green, and the query cache keys in red. You can see the current queries and subscriptions using the query cache keys, and the provided tags map specific tags to specific query cache keys.

    checkTour: build.query<Tour, string>({
  query: (tourId) =>
    generatePath("/api/tourInfo/:tourId", { tourId }),
  providesTags: (result, error, tourId) => [
    { type: "tour", id: tourId.toUpperCase() },
  ],
}),

    enter image description here enter image description here

    You can provide your own custom cache keys however, using the createApi's serializeQueryArgs function (description quoted above), or each endpoint's serializeQueryArgs function (below).

    Can be provided to return a custom cache key value based on the query arguments.

    This is primarily intended for cases where a non-serializable value is passed as part of the query arg object and should be excluded from the cache key. It may also be used for cases where an endpoint should only have a single cache entry, such as an infinite loading / pagination implementation.

    Unlike the createApi version which can only return a string, this per-endpoint option can also return an an object, number, or boolean. If it returns a string, that value will be used as the cache key directly. If it returns an object / number / boolean, that value will be passed to the built-in defaultSerializeQueryArgs. This simplifies the use case of stripping out args you don't want included in the cache key.