[BUG] `queryOptions.select` runs multiple times

[jpenna]

Describe the bug

I'm using GraphQL and I'm changing the data with the React Query's select middleware. It should run only once per request, but it is running multiple times.

Steps To Reproduce

1. Use the useList hook
2. Add queryOptions.select: (data) => { console.log('select'); return data }
3. See "select" is logged multiple times

Replication CodeSandbox: https://codesandbox.io/p/sandbox/react-query-5-forked-hh85pv

Expected behavior

It should run only once. In React Query's documentation, they say to memoize the select function: https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#memoization

useList is changing the function reference on every render.

Packages

• "@refinedev/core": "^4.54.0",

Additional Context

Possible fix: pass the select function inside a useCallback to useList's useQuery

[alicanerdurmaz]

Hello @jpenna, Thanks for the detailed explanation.

I believe your suggested fix will solve the problem, Do you want to work on this?

[jpenna]

Hey @alicanerdurmaz , I was going to send it, but the contribution process seemed to require more time than I can afford at the moment...

[alicanerdurmaz]

Hey @alicanerdurmaz , I was going to send it, but the contribution process seemed to require more time than I can afford at the moment...

We release a new version in the first week of every month. If you're not available, I can open a PR, or maybe someone else can do it. No problem, thank you!

[arndom]

I followed the suggestion of @jpenna, but it was still an issue. On logging the dependencies of the callback, the prefferedPagination was being updated

const querySelectCB = (rawData: GetListResponse<TQueryFnData>) => {
    let data = rawData;

    const { current, mode, pageSize } = prefferedPagination;

    if (mode === "client") {
      data = {
        ...data,
        data: data.data.slice((current - 1) * pageSize, current * pageSize),
        total: data.total,
      };
    }

    if (queryOptions?.select) {
      return queryOptions?.select?.(data);
    }

    return data as unknown as GetListResponse<TData>;
  }
  const querySelect = useCallback(querySelectCB, [prefferedPagination, queryOptions?.select]);

  console.log([prefferedPagination, queryOptions?.select])

// select is then assigned querySelect in https://github.com/refinedev/refine/blob/ce72ded1a746cd66699832dc3d8b28d37c1c511c/packages/core/src/hooks/data/useList.ts#L273 

prefferedPagination is calculated by the below, and even when memorized, due to pagination changing weirdly (from what I can see) on initial call, memorization solves nothing

  const prefferedPagination = handlePaginationParams({
    pagination,
    configPagination: config?.pagination,
    hasPagination: prefferedHasPagination,
  });

In my test within a useList in the app-crm-minimal example, there was no pagination passed so I'm stuck:

// inserted in: https://github.com/refinedev/refine/blob/ce72ded1a746cd66699832dc3d8b28d37c1c511c/examples/app-crm-minimal/src/routes/tasks/list/index.tsx#L30

    meta: {
      gqlQuery: TASK_STAGES_QUERY,
    },
    queryOptions: {
      select: React.useCallback((data) => {
        console.log("select", Math.random());
        return data;
      }, []),
    },

[jpenna]

Hey, @arndom , thanks for taking this up!

Did you try to memoize the result from handlePaginationParams? It seems to me this is causing the object to change on every render and then the callback is re-created again. I think this whole function can be memoized with the params. Something like the following:

export const handlePaginationParams = ({
  hasPagination,
  pagination,
  configPagination,
}: HandlePaginationParamsProps = {}): Required<Pagination> => {
return useMemo(() => {
  const hasPaginationString = hasPagination === false ? "off" : "server";
  const mode = pagination?.mode ?? hasPaginationString;

  const current =
    pickNotDeprecated(pagination?.current, configPagination?.current) ?? 1;

  const pageSize =
    pickNotDeprecated(pagination?.pageSize, configPagination?.pageSize) ?? 10;

  return {
    current,
    pageSize,
    mode,
  };
}, [hasPagination, pagination.mode, pagination?.pageSize, configPagination?.pageSize, configPagination?.current])
};

Btw, we should add to the documentation that the queryOptions.select must be memorized in the client component.

[arndom]

I did attempt to memoize the already exported implementation of handlePaginationParams while using its three args as dependencies. It yields the same results as what you've shown above.

The only time I got the intended result was when memorizing queryOptions.select in useList. So, I'm leaning towards this as the solution, ⬇️:

Btw, we should add to the documentation that the queryOptions.select must be memorized in the client component.

[jpenna]

Yeah, we will have to memoize queryOptions.select, otherwise it will always be a new component. React Query also says the select function should be memoized https://tanstack.com/query/latest/docs/framework/react/guides/render-optimizations#memoization

[arndom]

Oh, my bad, what I meant to say was that the only time I got the intended result was when I memoized the `select function` when using `useList` The reason being that, in the memoization of `queryOptions.select`, the value of `handlePaginationParams` has to also be memoized, and using either of our implementations doesn't seem to cut it because the `pagination dependency` seems to be changing, causing `preferredPagination` to be recalculated and I see no way prevent that.