How to use Apollo Client in Vue

import { createApp } from 'vue'
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

// Apollo Client setup
const httpLink = createHttpLink({
    uri: 'http://localhost:4000/graphql',
    headers: {
        authorization: `Bearer ${localStorage.getItem('token')}`
    }
})

const cache = new InMemoryCache({
    typePolicies: {
        User: {
            fields: {
                posts: {
                    merge(existing = [], incoming) {
                        return [...existing, ...incoming]
                    }
                }
            }
        }
    }
})

const apolloClient = new ApolloClient({
    link: httpLink,
    cache,
    defaultOptions: {
        watchQuery: {
            errorPolicy: 'all'
        }
    }
})

// Vue app setup
const app = createApp(App)
app.provide(DefaultApolloClient, apolloClient)
provideApolloClient(apolloClient)

// GraphQL operations
const GET_USERS = gql`
    query GetUsers($first: Int!, $after: String) {
        users(first: $first, after: $after) {
            edges {
                node {
                    id
                    name
                    email
                    avatar
                    posts {
                        id
                        title
                        content
                        createdAt
                    }
                }
                cursor
            }
            pageInfo {
                hasNextPage
                endCursor
            }
        }
    }
`

const CREATE_POST = gql`
    mutation CreatePost($input: CreatePostInput!) {
        createPost(input: $input) {
            id
            title
            content
            author {
                id
                name
            }
            createdAt
        }
    }
`

// Vue component with Apollo Client
import { useQuery, useMutation } from '@vue/apollo-composable'
import { ref, computed } from 'vue'

export default {
    setup() {
        const first = ref(10)
        const after = ref(null)

        // Query with reactive variables
        const { result, loading, error, refetch, fetchMore } = useQuery(
            GET_USERS,
            () => ({
                first: first.value,
                after: after.value
            }),
            {
                errorPolicy: 'all',
                fetchPolicy: 'cache-and-network'
            }
        )

        // Computed users from query result
        const users = computed(() =>
            result.value?.users?.edges?.map(edge => edge.node) ?? []
        )

        const pageInfo = computed(() =>
            result.value?.users?.pageInfo
        )

        // Mutation for creating posts
        const { mutate: createPost, loading: createPostLoading } = useMutation(
            CREATE_POST,
            {
                update(cache, { data: { createPost } }) {
                    // Update cache after mutation
                    const query = {
                        query: GET_USERS,
                        variables: { first: first.value, after: after.value }
                    }

                    const data = cache.readQuery(query)
                    if (data?.users?.edges) {
                        const authorEdge = data.users.edges.find(
                            edge => edge.node.id === createPost.author.id
                        )
                        if (authorEdge) {
                            authorEdge.node.posts.push(createPost)
                            cache.writeQuery({ ...query, data })
                        }
                    }
                }
            }
        )

        // Load more users (pagination)
        const loadMore = async () => {
            if (pageInfo.value?.hasNextPage) {
                await fetchMore({
                    variables: {
                        after: pageInfo.value.endCursor
                    }
                })
            }
        }

        // Create new post with optimistic response
        const handleCreatePost = async (postData) => {
            try {
                await createPost({
                    input: postData
                }, {
                    optimisticResponse: {
                        createPost: {
                            __typename: 'Post',
                            id: 'temp-id',
                            title: postData.title,
                            content: postData.content,
                            author: {
                                __typename: 'User',
                                id: postData.authorId,
                                name: 'Current User'
                            },
                            createdAt: new Date().toISOString()
                        }
                    }
                })
            } catch (err) {
                console.error('Failed to create post:', err)
            }
        }

        return {
            users,
            loading,
            error,
            pageInfo,
            createPostLoading,
            loadMore,
            handleCreatePost,
            refetch
        }
    }
}