Apollo Client (React) - Web SDK

npm install graphql-tag

// import whichever Apollo hooks you're using
import { useQuery, useMutation } from "@apollo/client";
import gql from "graphql-tag";

const PAGINATE_MOVIES = gql`
  query PaginateMovies(
    $prevTitle: String
    $nextTitle: String
    $limit: Int!
    $sortDirection: MovieSortByInput!
  ) {
    movies(
      # Can add other query filters here if you'd like
      query: { title_gt: $prevTitle, title_lt: $nextTitle }
      limit: $limit
      sortBy: $sortDirection
    ) {
      _id
      title
      year
    }
  }
`;
const resultsPerPage = 5;
function PaginateMovies() {
  const [variables, setVariables] = useState({
    prevTitle: undefined,
    nextTitle: undefined,
    limit: resultsPerPage,
    sortDirection: "TITLE_ASC",
  });
  const [firstTitle, setFirstTitle] = useState();
  const { data, error, loading } = useQuery(PAGINATE_MOVIES, {
    variables,
  });
  const [pagePreviousDisabled, setPagePreviousDisabled] = useState(true);
  const [pageNextDisabled, setPageNextDisabled] = useState(false);
  useEffect(() => {
    if (data?.movies?.length && firstTitle === undefined) {
      setFirstTitle(data.movies[0].title);
    }
    setPagePreviousDisabled(false);
    if (data?.movies?.length < resultsPerPage) {
      setPageNextDisabled(true);
      setPagePreviousDisabled(false);
    }
    if (
      variables.prevTitle === undefined ||
      data?.movies[0]?.title === firstTitle
    ) {
      setPagePreviousDisabled(true);
      setPageNextDisabled(false);
    }
  }, [data, data?.movies?.length, firstTitle, variables.prevTitle]);
  if (loading) {
    return <div>loading</div>;
  }
  if (error) {
    return <div>encountered an error: {error.message}</div>;
  }
  function goToNextPage() {
    setVariables({
      nextTitle: undefined,
      prevTitle: data.movies[data.movies.length - 1].title,
      limit: resultsPerPage,
      sortDirection: "TITLE_ASC",
    });
  }
  function goToPrevPage() {
    setVariables({
      nextTitle: data.movies[0].title,
      prevTitle: undefined,
      limit: resultsPerPage,
      sortDirection: "TITLE_DESC",
    });
  }
  const sorted = data.movies.sort((a, b) => {
    const titleA = a.title.toUpperCase(); // ignore upper and lowercase
    const titleB = b.title.toUpperCase(); // ignore upper and lowercase
    if (titleA < titleB) {
      return -1; // titleA comes first
    }
    if (titleA > titleB) {
      return 1; // titleB comes first
    }
  });
  return (
    <div>
      <h1>Movies</h1>
      {data?.movies?.length ? (
        sorted.map((movie) => (
          <div key={movie._id}>
            <h3>{movie.title}</h3>
            <p>Year Published: {" " + movie.year}</p>
            <br />
          </div>
        ))
      ) : (
        <p>No movies in system</p>
      )}
      <div>
        <button disabled={pagePreviousDisabled} onClick={goToPrevPage}>
          &larr; Previous Page
        </button>
        <button disabled={pageNextDisabled} onClick={goToNextPage}>
          Next Page &rarr;
        </button>
      </div>
    </div>
  );
}

// Connect to your MongoDB Realm app
const app = new Realm.App(APP_ID);
// Gets a valid Realm user access token to authenticate requests
async function getValidAccessToken() {
  // Guarantee that there's a logged in user with a valid access token
  if (!app.currentUser) {
    // If no user is logged in, log in an anonymous user. The logged in user will have a valid
    // access token.
    await app.logIn(Realm.Credentials.anonymous());
  } else {
    // An already logged in user's access token might be stale. Tokens must be refreshed after 
    // 30 minutes. To guarantee that the token is valid, we refresh the user's access token.
    await app.currentUser.refreshAccessToken();
  }
  return app.currentUser.accessToken;
}
// Configure the ApolloClient to connect to your app's GraphQL endpoint
const client = new ApolloClient({
  link: new HttpLink({
    uri: `https://services.cloud.mongodb.com/api/client/v2.0/app/${APP_ID}/graphql`,
    // We define a custom fetch handler for the Apollo client that lets us authenticate GraphQL requests.
    // The function intercepts every Apollo HTTP request and adds an Authorization header with a valid
    // access token before sending the request.
    fetch: async (uri, options) => {
      const accessToken = await getValidAccessToken();
      options.headers.Authorization = `Bearer ${accessToken}`;
      return fetch(uri, options);
    },
  }),
  cache: new InMemoryCache(),
});