Using custom Apollo Client with AWS AppSync

Question

Background

In a new project I am working on we are looking into using AppSync for our GraphQL server (with Amplify). However, as it depends on an old version of Apollo Client (2.4.6), and Apollo Client has introduced major changes in version 3.0, using the AwsAppSyncClient is not optimal. We cannot wait for AppSync to migrate to Apollo Client 3.0 either, so I am wondering if it is best to use a custom client with Apollo Client 3.0 for now and migrate over to AwsAppSyncClient once their Apollo dependency is migrated to 3.0. Is this a good idea? The current implementation of this can be found below. However, this poses a few new questions.

(This is my first question on Stack Overflow, so hope this is not too much at once!)

I have done a fair bit of research, but am still new to the topic of GraphQL, Apollo, AppSync and Amplify, so thought it would be best to ask the experts out there!

Questions

• How to best combine Apollo Client 3.0 with AppSync (see implementation below)? What do you lose by not using AwsAppSyncClient?
• With using a custom Apollo Client with AppSync, is it then possible to query both local and remote data in the same query (e.g. with the @client tag)?
• Is there a way to handle local state management with AwsAppSyncClient like there is with ApolloClient using e.g. reactive variables?

Additional question about using AppSync:

(Don't know whether I should create a separate question for this?)

• How does querying with AppSync actually work with regards to designing queries from the client? As far as I understand with GraphQL, the whole point is to combine what would have been multiple REST calls, while also only asking for the fields that are actually relevant. With AppSync and codegen, however, the queries.js and mutations.js files are automatically generated with only "basic" queries for each model, with all fields included; much like REST calls. Why is this being done, and how to work with it from the client side?

Using AppSync with custom client (Apollo Client 3.0)

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import Amplify from "aws-amplify";
import {
  ApolloProvider,
  ApolloClient,
  ApolloLink,
  createHttpLink,
  InMemoryCache,
  makeVar
} from "@apollo/client";
import { createAuthLink } from "aws-appsync-auth-link";

import awsExports from "./aws-exports";


Amplify.configure(awsExports);

const sidebarCollapsedVar = makeVar(false);

const link = ApolloLink.from([
  createAuthLink({
    url: awsExports.aws_appsync_graphqlEndpoint,
    region: awsExports.aws_appsync_region,
    auth: {
      type: awsExports.aws_appsync_authenticationType,
      apiKey: awsExports.aws_appsync_apiKey,
    },
  }),
  createHttpLink({ uri: awsExports.aws_appsync_graphqlEndpoint }),
]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          sidebarCollapsed: {
            read() {
              return sidebarCollapsedVar();
            },
          },
        },
      },
    },
  }),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);