react-query-auth

react-query-auth copied to clipboard

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-auth

examples/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?

Sadly this is still not working. I also do not understand why the error is handled separately from a successful response without data? To me it seems the API call for an unauthenticated user should result in a 403, not a 200 without content.

Following on from here, possibly relate, when running tscafter a simple import of configureAuth I'm getting:

src/App.tsx:5:31 - error TS7016: Could not find a declaration file for module 'react-query-auth'. '/Users/wml/Projects/work/test-vite/vite-project/node_modules/react-query-auth/dist/index.mjs' implicitly has an 'any' type.
  There are types at '/Users/wml/Projects/work/test-vite/vite-project/node_modules/react-query-auth/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'react-query-auth' library may need to update its package.json or typings.

5 import { configureAuth } from "react-query-auth";
                                ~~~~~~~~~~~~~~~~~~


Found 1 error in src/App.tsx:5