{"id":384662,"date":"2023-05-31T13:01:13","date_gmt":"2023-05-31T13:01:13","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=384662"},"modified":"2024-06-25T07:11:33","modified_gmt":"2024-06-25T07:11:33","slug":"use-of-fetchmore-usequery-in-nextjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/use-of-fetchmore-usequery-in-nextjs\/","title":{"rendered":"Use of fetchMore useQuery in nextJs"},"content":{"rendered":"\n

As We know hooks are very useful part in Headless Development<\/a>. So, Here is an implementation of using the Pagination of Apollo Client in a convenient way. <\/p>\n\n\n\n

The fetchMore function of ApolloClient provides us an option to request the data with updated query parameters and to merge the results of the previous and latest responses.<\/p>\n\n\n\n

About fetchMore function –<\/h2>\n\n\n\n

Pagination always involves\u00a0sending follow-up queries to your GraphQL server to obtain additional pages of results<\/strong>. <\/p>\n\n\n\n

In Apollo Client, the recommended way to send these follow-up queries is with the fetchMore function.
You can go through the FetchMore<\/a> section of Apollo for in-depth knowledge.<\/p>\n\n\n\n

Let’s start with taking an example to implement the fetchMore function. The basic idea in this example is to simply get all posts by clicking the Load More Button.<\/p>\n\n\n\n

Setup:<\/h2>\n\n\n\n

Let’s do the setup, I hope you all are aware to set up the Apollo Client, no worries if you are just beginning. Here is the official link<\/a> of Apollo Client for setting up ApolloClient in nextJs<\/code>.<\/p>\n\n\n\n

And, for next.js project setup you can checkout our another blog: NextJs Setup<\/a><\/p>\n\n\n\n

npm install @apollo\/client graphql \n\/\/To install apolloClient and graphql using the command in terminal.<\/pre>\n\n\n\n
\/\/_app.js file\n\nimport "@\/styles\/globals.css"\nimport {\n  ApolloProvider,\n  ApolloClient,\n  InMemoryCache,\n  gql,\n} from "@apollo\/client";\n\nexport default function App({ Component, pageProps }) {\n  const client = new ApolloClient({\n    uri: "https:\/\/graphqlzero.almansi.me\/api",\n    cache: new InMemoryCache(),\n  });\n\n  client\n    .query({\n      query: gql`\n        query Posts {\n          posts {\n            data {\n              id\n              title\n              body\n              user {\n                name\n                email\n                company {\n                  name\n                }\n                id\n              }\n            }\n            meta {\n              totalCount\n            }\n          }\n        }\n      `,\n    })\n    .then((result) => console.log(result));\n\n  return (\n    <ApolloProvider client={client}>\n      <Component {...pageProps} \/>\n    <\/ApolloProvider>\n  );\n}<\/pre>\n\n\n\n
Illustration of useQuery & fetchMore:<\/h2>\n\n\n\n
In the _app.js file, we did the setup of creating an instance of ApolloClient<\/code>, providing our URI and query to get fetched, and in response getting the result.
Note<\/strong>: We have wrapped the Component inside our ApolloProvider to make the apolloClient global in the application.<\/p>\n\n\n\n
FetchMore Component to fetch the graphql Query:<\/h2>\n\n\n\n
\/\/FetchMore.js\n\nimport { useQuery, gql } from "@apollo\/client";\n\nexport const POSTS_QUERY = gql`\n  query Posts($Page: Int!, $Limit: Int!) {\n    posts(options: { paginate: { page: $Page, limit: $Limit } }) {\n      data {\n        id\n        title\n        body\n        user {\n          name\n          email\n          company {\n            name\n          }\n          id\n        }\n      }\n      meta {\n        totalCount\n      }\n    }\n  }\n`;\n\nexport default function FetchMore() {\n  const offset = 1;\n  const { loading, error, data, fetchMore } = useQuery(POSTS_QUERY, {\n    variables: { Page: offset, Limit: 3 },\n  });\n\n  const handleLoadMore = () => {\n    fetchMore({\n      variables: {\n        Page: offset + 1,\n      },\n      updateQuery: (prev, { fetchMoreResult }) => {\n        if (!fetchMoreResult) return prev;\n        return Object.assign({}, prev, {\n          posts: {\n            ...fetchMoreResult.posts,\n            data: [...prev.posts.data, ...fetchMoreResult.posts.data],\n          },\n        });\n      },\n    });\n  };\n\n  if (loading) return <p>Loading...<\/p>;\n  if (error) return <p>Error : {error.message}<\/p>;\n\n  return (\n    <>\n      <h1\n        style={{\n          textAlign: "center",\n          textDecoration: "underline",\n          marginTop: "20px",\n        }}\n      >\n        OUR BLOG SITE\n      <\/h1>\n      {data.posts.data.map(({ id, body, title, user }) => (\n        <div style={{ padding: "20px" }} key={id}>\n          <h3>\n            {id}. <span style={{ textTransform: "capitalize" }}>{title}<\/span>\n          <\/h3>\n          <br \/>\n          <p style={{ textAlign: "justify" }}>\n            <span style={{ fontWeight: "bold" }}>Blog: <\/span>\n            <span>{body}<\/span>\n          <\/p>\n          <br \/>\n          <b>About this user:<\/b>\n          <p>\n            <b>By: <\/b> <span>{user.name}<\/span>\n          <\/p>\n          <br \/>\n          <hr \/>\n        <\/div>\n      ))}\n      <div style={{ alignItems: "", paddingBottom: "20px" }}>\n        <center>\n          <button\n            style={{\n              padding: "8px 10px",\n              fontSize: "20px",\n              backgroundColor: "green",\n              color: "white",\n            }}\n            onClick={handleLoadMore}\n          >\n            <b>Click to Load More<\/b>\n          <\/button>\n        <\/center>\n      <\/div>\n    <\/>\n  );\n}<\/pre>\n\n\n\n