T
TanStack•2y ago
robust-apricot

Migrating v4 to v5 give me couple of errors on some of the queries

Hi there i'm trying to migrated to v5 using the codemod in the docs. After running it, I get some queries where I have to manually migrate te query. But I'm having problems understanding the error and how to migrate them. For example 
// v4

async function getOverzichtEigenBezwaarschriften(urlProps: IUrlProps) {
  const { data } =
    await omvUpInzageProjectfasenApi.get<IBezwaarschriftenPageableResponse>(
      getOverzichtEigenBezwaarschriftenUrlSuffix(urlProps),
    );
  return data;
}

export function useOverzichtEigenBezwaarschriften({
  projectfaseUuid,
  groepUuid,
  page,
  keepPreviousData = false,
}: IRequest) {
  const options = { ...defaultOptions, ...page } as IPagingOptions;

return useQuery<IBezwaarschriftenPageableResponse>({
    queryKey: [
      'overzicht-eigen-bezwaarschriften',
      { projectfaseUuid, groepUuid, page: options.pageParam },
    ],

    queryFn: () => {
      return getOverzichtEigenBezwaarschriften({
        projectfaseUuid,
        groepUuid,
        options,
      });
    },

    keepPreviousData,
    enabled: !!projectfaseUuid,
    staleTime: 0,
  });
}
// v4

async function getOverzichtEigenBezwaarschriften(urlProps: IUrlProps) {
  const { data } =
    await omvUpInzageProjectfasenApi.get<IBezwaarschriftenPageableResponse>(
      getOverzichtEigenBezwaarschriftenUrlSuffix(urlProps),
    );
  return data;
}

export function useOverzichtEigenBezwaarschriften({
  projectfaseUuid,
  groepUuid,
  page,
  keepPreviousData = false,
}: IRequest) {
  const options = { ...defaultOptions, ...page } as IPagingOptions;

return useQuery<IBezwaarschriftenPageableResponse>({
    queryKey: [
      'overzicht-eigen-bezwaarschriften',
      { projectfaseUuid, groepUuid, page: options.pageParam },
    ],

    queryFn: () => {
      return getOverzichtEigenBezwaarschriften({
        projectfaseUuid,
        groepUuid,
        options,
      });
    },

    keepPreviousData,
    enabled: !!projectfaseUuid,
    staleTime: 0,
  });
}
ts and in version5 
export function useOverzichtEigenBezwaarschriften({
  projectfaseUuid,
  groepUuid,
  page,
  keepPreviousData = false,
}: IRequest) {
  const options = { ...defaultOptions, ...page } as IPagingOptions;

  return useQuery<IBezwaarschriftenPageableResponse>({
    queryKey: [
      'overzicht-eigen-bezwaarschriften',
      { projectfaseUuid, groepUuid, page: options.pageParam },
    ],

    queryFn: () => {
      return getOverzichtEigenBezwaarschriften({
        projectfaseUuid,
        groepUuid,
        options,
      });
    },

    keepPreviousData,
    enabled: !!projectfaseUuid,
    staleTime: 0,
  });
}
export function useOverzichtEigenBezwaarschriften({
  projectfaseUuid,
  groepUuid,
  page,
  keepPreviousData = false,
}: IRequest) {
  const options = { ...defaultOptions, ...page } as IPagingOptions;

  return useQuery<IBezwaarschriftenPageableResponse>({
    queryKey: [
      'overzicht-eigen-bezwaarschriften',
      { projectfaseUuid, groepUuid, page: options.pageParam },
    ],

    queryFn: () => {
      return getOverzichtEigenBezwaarschriften({
        projectfaseUuid,
        groepUuid,
        options,
      });
    },

    keepPreviousData,
    enabled: !!projectfaseUuid,
    staleTime: 0,
  });
}
but Im getting an eslint error message on the queryKey The following dependencies are missing in your queryKey: optionseslint@tanstack/query/exhaustive-deps
1 Reply
robust-apricot
robust-apricotOP•2y ago
NVM i found th eissue I actually forgot to include the options inside my queryKey, however now I have another question, do I need to include all the querKeys that are use on my queryFn? would this affect the fetching and/or execution of my queryFn?

Did you find this page helpful?