Apollo Clientのセットアップ

npm install @apollo/client@^3.14.0

{
  "aws_appsync_graphqlEndpoint": "https://xxxxx.appsync-api.us-east-1.amazonaws.com/graphql",
  "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
  "aws_appsync_region": "us-east-1"
}

fragment PostDetails on Post {
  id
  title
  content
  status
  rating
  createdAt
  updatedAt
  _version
  _deleted
  _lastChangedAt
  owner
}

import { gql } from '@apollo/client';

// Fragment for consistent field selection
const POST_DETAILS_FRAGMENT = gql`
  fragment PostDetails on Post {
    id
    title
    content
    status
    rating
    createdAt
    updatedAt
    _version
    _deleted
    _lastChangedAt
    owner
  }
`;

// List all posts
export const LIST_POSTS = gql`
  ${POST_DETAILS_FRAGMENT}
  query ListPosts($filter: ModelPostFilterInput, $limit: Int, $nextToken: String) {
    listPosts(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        ...PostDetails
      }
      nextToken
    }
  }
`;

// Get a single post by ID
export const GET_POST = gql`
  ${POST_DETAILS_FRAGMENT}
  query GetPost($id: ID!) {
    getPost(id: $id) {
      ...PostDetails
    }
  }
`;

// Create a new post
export const CREATE_POST = gql`
  ${POST_DETAILS_FRAGMENT}
  mutation CreatePost($input: CreatePostInput!) {
    createPost(input: $input) {
      ...PostDetails
    }
  }
`;

// Update an existing post
export const UPDATE_POST = gql`
  ${POST_DETAILS_FRAGMENT}
  mutation UpdatePost($input: UpdatePostInput!) {
    updatePost(input: $input) {
      ...PostDetails
    }
  }
`;

// Delete a post
export const DELETE_POST = gql`
  ${POST_DETAILS_FRAGMENT}
  mutation DeletePost($input: DeletePostInput!) {
    deletePost(input: $input) {
      ...PostDetails
    }
  }
`;

// First, query the current post (includes _version in response)
const { data } = await apolloClient.query({
  query: GET_POST,
  variables: { id: postId },
});
const post = data.getPost;

// Then, pass _version when updating
await apolloClient.mutate({
  mutation: UPDATE_POST,
  variables: {
    input: {
      id: post.id,
      title: 'Updated Title',
      _version: post._version, // REQUIRED
    },
  },
});

const { data } = await apolloClient.query({ query: LIST_POSTS });
const activePosts = data.listPosts.items.filter(post => !post._deleted);

function filterDeleted<T extends { _deleted?: boolean | null }>(items: T[]): T[] {
  return items.filter(item => !item._deleted);
}

// Usage
const { data } = await apolloClient.query({ query: LIST_POSTS });
const activePosts = filterDeleted(data.listPosts.items);

import { createHttpLink } from '@apollo/client';
import config from '../amplifyconfiguration.json';

const httpLink = createHttpLink({
  uri: config.aws_appsync_graphqlEndpoint,
});

import { setContext } from '@apollo/client/link/context';
import { fetchAuthSession } from 'aws-amplify/auth';

const authLink = setContext(async (_, { headers }) => {
  try {
    const session = await fetchAuthSession();
    const token = session.tokens?.idToken?.toString();
    return {
      headers: {
        ...headers,
        authorization: token || '',
      },
    };
  } catch (error) {
    console.error('Auth session error:', error);
    return { headers };
  }
});

import { onError } from '@apollo/client/link/error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    for (const { message, locations, path } of graphQLErrors) {
      console.error(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      );

      if (message.includes('Unauthorized') || message.includes('401')) {
        // Token expired or invalid -- redirect to sign-in
      }
    }
  }

  if (networkError) {
    console.error(`[Network error]: ${networkError}`);
  }
});

import { RetryLink } from '@apollo/client/link/retry';

const retryLink = new RetryLink({
  delay: {
    initial: 300,
    max: 5000,
    jitter: true,
  },
  attempts: {
    max: 3,
    retryIf: (error) => !!error,
  },
});

import {
  ApolloClient,
  InMemoryCache,
  createHttpLink,
  from,
} from '@apollo/client';

export const apolloClient = new ApolloClient({
  link: from([retryLink, errorLink, authLink, httpLink]),
  cache: new InMemoryCache(),
});

Request  --> RetryLink --> ErrorLink --> AuthLink --> HttpLink --> AppSync
Response <-- RetryLink <-- ErrorLink <-- AuthLink <-- HttpLink <-- AppSync

import { ApolloProvider } from '@apollo/client';
import { apolloClient } from './apolloClient';

function App() {
  return (
    <ApolloProvider client={apolloClient}>
      {/* Your app components can now use useQuery, useMutation, etc. */}
    </ApolloProvider>
  );
}

import { signOut } from 'aws-amplify/auth';
import { apolloClient } from './apolloClient';

async function handleSignOut() {
  // 1. Clear Apollo Client's in-memory cache
  await apolloClient.clearStore();

  // 2. Sign out from Amplify (clears Cognito tokens)
  await signOut();
}

import { generateClient } from 'aws-amplify/api';

const amplifyClient = generateClient();

import { useQuery } from '@apollo/client';
import { generateClient } from 'aws-amplify/api';
import { useEffect } from 'react';
import { LIST_POSTS } from './graphql/operations';

const amplifyClient = generateClient();

function PostList() {
  const { data, loading, error, refetch } = useQuery(LIST_POSTS);

  useEffect(() => {
    const subscriptions = [
      amplifyClient.graphql({
        query: `subscription OnCreatePost {
          onCreatePost { id }
        }`
      }).subscribe({
        next: () => refetch(),
        error: (err) => console.error('Create subscription error:', err),
      }),
      amplifyClient.graphql({
        query: `subscription OnUpdatePost {
          onUpdatePost { id }
        }`
      }).subscribe({
        next: () => refetch(),
        error: (err) => console.error('Update subscription error:', err),
      }),
      amplifyClient.graphql({
        query: `subscription OnDeletePost {
          onDeletePost { id }
        }`
      }).subscribe({
        next: () => refetch(),
        error: (err) => console.error('Delete subscription error:', err),
      }),
    ];

    return () => subscriptions.forEach(sub => sub.unsubscribe());
  }, [refetch]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  const activePosts = data?.listPosts?.items?.filter(
    (post) => !post._deleted
  ) || [];

  return (
    <ul>
      {activePosts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}