usePagination accept nullable fragmentRef

[eMerzh]

Hello :)

Thanks a lot for your project and your time maintaining this 👏 I stumble upon a small issue, i was trying to type a usePagination i got.

The idea is that i do the usePagination directly after a useQuery, in the same component.

It seems that it works like it should be if i do that in TS, the type doesn't let me do that (complain about null) This seems to be ok with useFragment though.

As an example, i've modified a bit the nextjs example of the repo 👇

diff --git a/examples/relay-hook-example/pagination-nextjs-ssr/.watchmanconfig b/examples/relay-hook-example/pagination-nextjs-ssr/.watchmanconfig
deleted file mode 100644
index e69de29..0000000
diff --git a/examples/relay-hook-example/pagination-nextjs-ssr/components/TodoList.tsx b/examples/relay-hook-example/pagination-nextjs-ssr/components/TodoList.tsx
index 7bdaafc..1e83671 100644
--- a/examples/relay-hook-example/pagination-nextjs-ssr/components/TodoList.tsx
+++ b/examples/relay-hook-example/pagination-nextjs-ssr/components/TodoList.tsx
@@ -18,7 +18,7 @@ import { useRouter } from 'next/router';
 import React, { useCallback, useState } from 'react';
 
 import InfiniteScroll from 'react-infinite-scroller';
-import { graphql, usePagination, useRelayEnvironment } from 'relay-hooks';
+import { graphql, usePagination, useQuery, useRelayEnvironment } from 'relay-hooks';
 import styled from 'styled-components';
 import { TodoList_user, TodoList_user$key } from '../__generated__/relay/TodoList_user.graphql';
 import { UserFragmentRefetchQuery } from '../__generated__/relay/UserFragmentRefetchQuery.graphql';
@@ -28,6 +28,7 @@ import { Todo } from './Todo';
 import { isNotNull, StyledButton, StyledDivButton } from './TodoApp';
 import { TodoTextInput } from './TodoTextInput';
 import { Disposable } from 'relay-runtime';
+import { TodoListUserQuery } from '../__generated__/relay/TodoListUserQuery.graphql';
 type Todos = NonNullable<TodoList_user['todos']>;
 type Edges = NonNullable<Todos['edges']>;
 type Edge = NonNullable<Edges[number]>;
@@ -119,7 +120,15 @@ export const TodoList = (props: Props): JSX.Element => {
     const [rowsPerPage, setRowsPerPage] = useState(2);
     const [page, setPage] = useState(0);
     const router = useRouter();
-
+    const { data: userq } = useQuery<TodoListUserQuery>(graphql`
+    query TodoListUserQuery($userId: String, $after: String, $first: Int, $before: String, $last: Int){
+        user(id: $userId, first: $first, after: $after, before: $before, last: $last) {
+            id
+            userId
+            ...ReadInlineUser_user
+            ...TodoList_user @arguments(first: $first, after: $after, before: $before, last: $last)
+        }
+    }`, {})
     const paginated = isPaginated(router);
     const scroll = isScroll(router);
     const {
@@ -133,7 +142,7 @@ export const TodoList = (props: Props): JSX.Element => {
         isLoading: refetchLoading,
     } = usePagination<UserFragmentRefetchQuery, TodoList_user$key>(
         paginated ? fragmentTableSpecs : fragmentSpecs,
-        props.user,
+        userq
     );

here is there's an error with

Argument of type 'TodoListUserQuery$data | null | undefined' is not assignable to parameter of type 'TodoList_user$key'. Type 'undefined' is not assignable to type 'TodoList_user$key'.ts(2345)

but i can't set usePagination<UserFragmentRefetchQuery, TodoList_user$key|null>

otherwise i got :

Type 'TodoList_user$key | null' does not satisfy the constraint 'Readonly<{ ' $data'?: unknown; ' $fragmentSpreads': unknown; }>'. Type 'null' is not assignable to type 'Readonly<{ ' $data'?: unknown; ' $fragmentSpreads': unknown; }>'.ts(2344)

Thanks for the help :)

[morrys]

I'am on holiday, i will take a look next week:)

[eMerzh]

Enjoy your holidays 👍 🌴 it's not a life-threatening issue ;-)

[morrys]

hi @eMerzh, I have the same behavior with useFragment

const paginated = isPaginated(router);
const scroll = isScroll(router);
useFragment(fragmentSpecs, userq);

[eMerzh]

i think this is fixed now :)