検索結果を表示させたい

Graphqlを用いてgithubのレポジトリの検索結果を取得するミニアプリを作成中です。

現在ページネーションを作成しており、次のページを表示させるボタンを設置したのですが、
ボタンにonClick={goNext(endCursor)}を持たせると検索結果が表示されなくなってしまいます。
対処法を教えていただけると幸いです。

一枚目が正常な表示結果で二枚目が意図していない表示結果です。

以下App.jsのファイルとそこで用いるgraphql.jsです。

<App.js>

JavaScript
1import client from "./client";
2import { Query } from "react-apollo";
3import { ApolloProvider } from "react-apollo";
4import { SEARCH_REPOSITORIES } from "./graphql";
5import { useState } from "react";
6
7const PER_PAGE = 5;
8const VARIABLES = {
9  first: PER_PAGE,
10  after: null,
11  before: null,
12  last: null,
13  query: "フロントエンドエンジニア",
14};
15
16function App() {
17  const [first, setFirst] = useState(VARIABLES.first);
18  const [after, setAfter] = useState(VARIABLES.after);
19  const [before, setBefore] = useState(VARIABLES.before);
20  const [last, setLast] = useState(VARIABLES.last);
21  const [query, setQuery] = useState(VARIABLES.query);
22
23  const handleChange = (e) => {
24    setQuery(e.target.value);
25  };
26
27  const goNext = (endCursor) => {
28    setFirst(PER_PAGE);
29    setAfter(endCursor);
30    setLast(null);
31    setBefore(null);
32  };
33
34  console.log({ query });
35
36  return (
37    <ApolloProvider client={client}>
38      <form>
39        <input value={query} onChange={handleChange} />
40      </form>
41      <Query
42        query={SEARCH_REPOSITORIES}
43        variables={{ first, after, before, last, query }}
44      >
45        {({ loading, error, data }) => {
46          if (loading) return `Loading...`;
47          if (error) return `Error! ${error.message}`;
48          console.log(data.search);
49
50          const search = data.search;
51          const repositoryCount = search.repositoryCount;
52          const repositoryUnit =
53            repositoryCount === 1 ? "Repository" : "Repositories";
54          const endCursor = search.pageInfo.endCursor;
55          const title = `GitHub Repositories Search Results - ${repositoryCount} ${repositoryUnit}`;
56
57          return (
58            <>
59              <h2>{title}</h2>
60              <ul>
61                {search.edges.map((edge) => {
62                  const node = edge.node;
63                  return (
64                    <li key={node.id}>
65                      <a href={node.url} rel="noreferrer" target="_blank">
66                        {node.name}
67                      </a>
68                    </li>
69                  );
70                })}
71              </ul>
72              {search.pageInfo.hasNextPage && (
73                <button onClick={goNext(endCursor)}>NEXT</button>
74              )}
75            </>
76          );
77        }}
78      </Query>
79    </ApolloProvider>
80  );
81}
82
83export default App;
84

<graphql.js>

JavaScript
1export const SEARCH_REPOSITORIES = gql`
2  query searchRepositories(
3    $first: Int
4    $after: String
5    $last: Int
6    $before: String
7    $query: String!
8  ) {
9    search(
10      first: $first
11      after: $after
12      last: $last
13      before: $before
14      query: $query
15      type: REPOSITORY
16    ) {
17      repositoryCount
18      pageInfo {
19        endCursor
20        hasNextPage
21        hasPreviousPage
22        startCursor
23      }
24      edges {
25        cursor
26        node {
27          ... on Repository {
28            id
29            name
30            url
31            stargazers {
32              totalCount
33            }
34            viewerHasStarred
35          }
36        }
37      }
38    }
39  }
40`;
41