Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

renderError not working with v.2.2.0 #26

Open
YamabikoLab opened this issue Mar 25, 2023 · 2 comments
Open

renderError not working with v.2.2.0 #26

YamabikoLab opened this issue Mar 25, 2023 · 2 comments

Comments

@YamabikoLab
Copy link

YamabikoLab commented Mar 25, 2023

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.

image

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?

@YamabikoLab YamabikoLab changed the title renderError not working by v.2.2.0 renderError not working with v.2.2.0 Mar 25, 2023
@jur-ng
Copy link

jur-ng commented Oct 15, 2023

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.

@devo-wm
Copy link
Contributor

devo-wm commented Nov 10, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants