adrianhajdin / social_media_app

Build a modern social app with a stunning UI with a native mobile feel, a special tech stack, an infinite scroll feature, and amazing performance using React JS, Appwrite, TypeScript, and more.
https://jsmastery.pro
1.06k stars 309 forks source link

Error on isLoading Property . If anyone has answers drop them I appreciate it :) Thank you #41

Open GJ-sanjay opened 4 months ago

GJ-sanjay commented 4 months ago

Everywhere isLoading property is used . I get this error and i have no idea how to tackle this. If i use chatgpt it completely alters my code. The error: Property 'isLoading' does not exist on type 'UseMutationResult<Session | undefined, Error, { email: string; password: string; }, unknown>'.ts(2339) This happens on Signinform, signupform, UpdatProfile, Postform Property 'isLoading' does not exist on type 'UseMutationResult<Session | undefined, Error, { email: string; password: string; }, unknown>'.ts(2339)

issue while deployment
Viraj-Pr commented 4 months ago

yes , you have change the "isLoading" to "isPending"

it's property has been changed because of the new update.

GJ-sanjay commented 4 months ago

should i replace isLoading with isPending everwhere? and also i tried replacing all and the home page had something bad happened

image
Viraj-Pr commented 4 months ago

yes cause the appwrite is under maintenance. and where you get error of "isLoading" you can change that to "isPending"

GJ-sanjay commented 4 months ago

Thanks king!

GJ-sanjay commented 4 months ago

Hey me again ;( . I'm faced with another issue i cleared all the errors like you said and i implemented isPending as well in places i got error. Now i get error in queries.ts

image

do you have any idea how to fix this?

Viraj-Pr commented 4 months ago
   export const useGetPosts = () => {
      return useInfiniteQuery({
         queryKey: [QUERY_KEYS.GET_INFINITE_POSTS],
        queryFn: getInfinitePosts,
      getNextPageParam: (lastPage) => {
        // If there's no data, there are no more pages.
        if (lastPage && lastPage.documents.length === 0) {
          return null;
           }
    // Use the $id of the last document as the cursor.

  const lastId = lastPage?.documents[lastPage?.documents.length - 1].$id;

    return lastId;
   },
  });
  };

"getNextPageParam" in this Typescript is going to give you warning but we can ignore

Vidhanvyrs commented 4 months ago

hey @Viraj-Pr i got the same error like @GJ-sanjay so i did what this thread suggested now as of for getNextPageParam i am having this overload issue while deploying the project through vercel

No overload matches this call. Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<DocumentList | undefined, Error, InfiniteData<DocumentList | undefined, unknown>, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error. Type '(lastPage: DocumentList | undefined) => string | null | undefined' is not assignable to type 'GetNextPageParamFunction<number, DocumentList | undefined>'. Type 'string | null | undefined' is not assignable to type 'number | null | undefined'. Type 'string' is not assignable to type 'number'. Overload 2 of 3, '(options: DefinedInitialDataInfiniteOptions<DocumentList | undefined, Error, InfiniteData<DocumentList | undefined, unknown>, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): DefinedUseInfiniteQueryResult<...>', gave the following error. Type '(lastPage: DocumentList | undefined) => string | null | undefined' is not assignable to type 'GetNextPageParamFunction<number, DocumentList | undefined>'. Overload 3 of 3, '(options: UseInfiniteQueryOptions<DocumentList | undefined, Error, InfiniteData<DocumentList | undefined, unknown>, DocumentList<...> | undefined, QUERY_KEYS[], number>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error. Type '(lastPage: DocumentList | undefined) => string | null | undefined' is not assignable to type 'GetNextPageParamFunction<number, DocumentList | undefined>'.ts(2769)

image

image

Vidhanvyrs commented 4 months ago

can anyone help me out here

Viraj-Pr commented 4 months ago

@Vidhanvyrs Hey, yes i have the solution for this error. // export const useGetPosts = () => { return useInfiniteQuery({ queryKey: [QUERY_KEYS.GET_INFINITE_POSTS], queryFn: getInfinitePosts as any, getNextPageParam: (lastPage: any) => { if (lastPage && lastPage.documents.length === 0) { return null; } const lastId = lastPage.documents[lastPage.documents.length - 1].$id; return lastId; }, initialPageParam: null, });

try this code and you all set .

its gonna show error of any but you can ignore and in the development this code is gonna support the infinite scrolling.

Viraj-Pr commented 4 months ago

https://github.com/Viraj-Pr/Viraj/blob/main/src/lib/react-query/queriesAndMutations.ts

you can also check my repo.

Vidhanvyrs commented 4 months ago

thankyou so much 🤩 @Viraj-Pr this resolved my error however can you explain about this use of any and how it is resolving the error

Viraj-Pr commented 4 months ago

@Vidhanvyrs the use of any : because we are using typescript, so typescript is always needs type to define variables( that's what is in nature of typescript ) and when we deploy our project using typescript without define type to variables it gots crash. and sometime we use complex api to pass the data and we can not define the type in that so we use "any" and typescript is gonna complain about that because "any" has no type to define thus typescript is going to ignore that complain and runs our code in production level.

Vidhanvyrs commented 4 months ago

Got it @Viraj-Pr 🙇