Conditional Query Key

[IdoBouskila]

Hello, I have a component that uses this hook, The query key is changed depending if projectId value is truthy.
There are 2 ways that I thought about to get the same results:

• The first one is the code provided below
• The second is to create two hooks and export the relevant one depending on projectId parameter.

The first way looks better to me, but I'd like to ask what do you suggest? (I didn't find a mention of a similar scenario in the docs)

// * First way *
// useRun.js
const useRuns = (projectId) => {
    const { data } = useQuery({
        queryKey: ! projectId ? ['runs', 'all'] : ['runs', 'projects', projectId],
        queryFn: () => {
            if(projectId) {
                return fetchProjectRuns(projectId);
            }

            return fetchAllRuns();
        }
    });

    return data;
};

[TkDodo]

I think two separate hooks are more idiomatic; you not only change the key, but also the complete queryFn implementation:

const useAllRuns = () => useQuery({
  queryKey: ['runs', 'all'],
  queryFn: fetchAllRuns
})

const useRuns = (projectId) => useQuery({
  queryKey: ['runs', 'projects', projectId],
  queryFn: () => fetchProjectRuns(projectId)
})

[IdoBouskila]

In my case, I have to use those queries in the same component depending on the projectId prop.

Since we can't call hooks conditionally, I need to either have a single useQuery call that will return a different response based on the condition (similar to the example above), or have 2 useQuery calls that are enabled/disabled based on the condition and return the proper data accordingly:

export const useAllRunsOrProjectRuns = (projectId) => { 
    const allRunsQuery = useQuery({
      queryKey: ['runs', 'all'],
      queryFn: fetchAllRuns,
      enabled: ! projectId,
    })
    
    const allProjectsRunQuery = useQuery({
      queryKey: ['runs', 'projects', projectId],
      queryFn: () => fetchProjectRuns(projectId),
      enabled: projectId,
    })
    
    return projectId ? allProjectsRunQuery : allRunsQuery;
}

What do you think? 🤔