eslint exhaustive-deps incorrectly labelling constant value as key dependency

[am-maneaters]

Describe the bug

@tanstack/[email protected]

incorrect exhaustive-deps error for constant values when using them in the queryFn

const CONST_VAL = 1;

const useFoo = () => {

  // queryKey eslint error: The following dependencies are missing in your queryKey: CONST_VAL
  const testQuery = useQuery({
    queryKey: ['foo'],
    queryFn: () => CONST_VAL,
  });

  // no react-hooks error when using const
  useEffect(() => {
    const newVal = 1 + CONST_VAL;
  }, []);

};

Steps to reproduce

use a constant in the queryFn property for a useQuery hook. then you will see an error saying that the constant is not in the dependency array

Expected behavior

constants should not count as a dependency

Platform

vscode

Tanstack Query adapter

react-query

TanStack Query version

4.27.0

[TkDodo]

can confirm, here is a failing test case:

    {
      name: 'should ignore constants defined out of scope',
      code: `
        const CONST_VAL = 1
        function MyComponent() {
            useQuery({
              queryKey: ["foo"],
              queryFn: () => CONST_VAL
            });
        }
      `,
    },

@Newbie012 FYI

[Newbie012]

Hopefully I'll have the time today to fix this and the other issue.

[Newbie012]

Should be fixed once #5217 is merged.

[am-maneaters]

@TkDodo @Newbie012 the new update fixes this issue when the useQuery is called from within a function Foo(){} definition but not a const Foo = () => {} arrow function (i.e. my original example). see additional test case below

    {
      name: 'should ignore constants defined out of arrow function scope',
      code: `
        const CONST_VAL = 1
        const MyComponent = () => {
            useQuery({
              queryKey: ["foo"],
              queryFn: () => CONST_VAL
            });
        }
      `,
    },

const T = 1;
// No error
function test() {
 useQuery({
    queryKey: ['foo'],
    queryFn: () => T,
  });
}


// Errors
const test = () => {
  useQuery({
    queryKey: ['foo'],
    queryFn: () => T,
  });
}

// also errors
const useTest2 = function () {
  useQuery({
    queryKey: ['foo'],
    queryFn: () => T,
  });
};

[luizeboli]

@TkDodo @Newbie012 Just saw its supposed to be fixed by the latest release (4.29.8), however I'm still experiencing this error when using an external function to define the query:

const Ab = 1

// This throws the error
function groupsQuery() {
  return {
    queryKey: ['get-groups'],
    queryFn: () => Ab,
  }
}

// This works
function useGroups() {
  return useQuery({
    queryKey: ['get-groups'],
    queryFn: () => Ab,
  })
}

[TkDodo]

please create a new issue for this @luizeboli