renderError not working with v.2.2.0 #26
Description
hello @alan2207
renderError does not work on vite example.
How should I implement this?
First, update the version of react-query-auth to v.2.2.0.
yarn remove react-query-auth
yarn add react-query-authexamples/vite/package.json
"dependencies": {
"@tanstack/react-query": "^4.24.6",
"@tanstack/react-query-devtools": "^4.24.6",
"cross-env": "^7.0.3",
"msw": "^1.0.1",
"react-app-polyfill": "^3.0.0",
"react-query-auth": "^2.2.0"
},
"devDependencies": {
"@types/node": "^18.14.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4",
"vite": "latest",
"vite-preset-react": "latest"
},
Add renderError.
examples/vite/src/App.tsx
const SampleApp = () => {
const [queryClient] = React.useState(() => new QueryClient());
return (
<Container>
<QueryClientProvider client={queryClient}>
<AuthLoader
renderLoading={() => <div>Loading ...</div>}
renderUnauthenticated={() => <AuthScreen />}
+ renderError={(error) => <AuthScreen />}
>
<UserInfo />
</AuthLoader>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</Container>
);
};A warning is displayed.
type '{ children: renderLoading: () => Element; renderUnauthenticated: () => Element; renderError: (error: any) => Element; }' type 'IntrinsicAttributes & { children: ReactNode; renderLoading: () => Element; renderUnauthenticated?: (() => Element). | cannot be assigned.
Property 'renderError' is of type 'IntrinsicAttributes & { children: ReactNode; renderLoading: () => Element; renderUnauthenticated?: (() => Element) | Undefined; }' The following is not present in the
Translated with www.DeepL.com/Translator (free version)
Is there a problem with renderError not being present in index.d.ts in node_modules?
examples/vite/node_modules/react-query-auth/dist/index.d.ts
declare function configureAuth<User, Error, LoginCredentials, RegisterCredentials>(config: ReactQueryAuthConfig<User, LoginCredentials, RegisterCredentials>): {
useUser: (options?: Omit<UseQueryOptions<User, Error, User, QueryKey>, 'queryKey' | 'queryFn'>) => _tanstack_react_query.UseQueryResult<User, Error>;
useLogin: (options?: Omit<UseMutationOptions<User, Error, LoginCredentials>, 'mutationFn'>) => _tanstack_react_query.UseMutationResult<User, Error, LoginCredentials, unknown>;
useRegister: (options?: Omit<UseMutationOptions<User, Error, RegisterCredentials>, 'mutationFn'>) => _tanstack_react_query.UseMutationResult<User, Error, RegisterCredentials, unknown>;
useLogout: (options?: UseMutationOptions<unknown, Error, unknown>) => _tanstack_react_query.UseMutationResult<unknown, Error, unknown, unknown>;
AuthLoader: ({ children, renderLoading, renderUnauthenticated, }: {
children: React.ReactNode;
renderLoading: () => JSX.Element;
renderUnauthenticated?: (() => JSX.Element) | undefined;
}) => JSX.Element;
};How can the problem be resolved?