T
TanStack•3y ago
deep-jade

UseQuery Parameters in Typescript

Good Afternoon, does anyone know if there is an updated example for a Optimistic RQ Usage? The one in the docs look to be broken due to the older version: https://codesandbox.io/s/github/tannerlinsley/react-query/tree/v3/examples/optimistic-updates-typescript I was getting an issue on my side with the updated version specific to the queryKey equaling 'roles'. I changed that value to ['roles'], then the error went back to the one in codesandbox link with the options. 
import { AxiosError } from 'axios';
import { useQuery, UseQueryOptions } from '@tanstack/react-query';
import { baseAxios } from 'src/utils/baseAxios';

type Roles = {
  items: readonly {
    id: string;
    roleDesc: string;
    rolePermissionAssignments: [
      {
        permission: {
          id: string;
          permDesc: string;
        };
      }
    ];
  }[];
  ts: number;
};

async function fetchRoles(): Promise<Roles> {
  const res = await baseAxios.get('/sysadmin/roles');
  return res.data;
}

function useRoles<TData = Roles>(options?: UseQueryOptions<Roles, AxiosError, TData>) {
  return useQuery('roles', fetchRoles, options);
}

export default function Roles() {
  const { isFetching, ...queryInfo } = useRoles();

  console.log(isFetching);
  console.log(queryInfo);

  return <div>Testing...</div>;
}
import { AxiosError } from 'axios';
import { useQuery, UseQueryOptions } from '@tanstack/react-query';
import { baseAxios } from 'src/utils/baseAxios';

type Roles = {
  items: readonly {
    id: string;
    roleDesc: string;
    rolePermissionAssignments: [
      {
        permission: {
          id: string;
          permDesc: string;
        };
      }
    ];
  }[];
  ts: number;
};

async function fetchRoles(): Promise<Roles> {
  const res = await baseAxios.get('/sysadmin/roles');
  return res.data;
}

function useRoles<TData = Roles>(options?: UseQueryOptions<Roles, AxiosError, TData>) {
  return useQuery('roles', fetchRoles, options);
}

export default function Roles() {
  const { isFetching, ...queryInfo } = useRoles();

  console.log(isFetching);
  console.log(queryInfo);

  return <div>Testing...</div>;
}
CodeSandbox
optimistic-updates-typescript - CodeSandbox
optimistic-updates-typescript using @types/node, @types/react, axios, isomorphic-unfetch, next, react, react-dom, react-query, typescript
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?