Установка: ```bash npm install @apollo/client @vue/apollo-composable graphql ``` Настройка клиента: ```javascript // apollo/client.js import { ApolloClient, InMemoryCache, createHttpLink, from, } from '@apollo/client/core' import { onError } from '@apollo/client/link/error' import { setContext } from '@apollo/client/link/context' // HTTP link const httpLink = createHttpLink({ uri: import.meta.env.VITE_GRAPHQL_URL || 'http://localhost:4000/graphql', }) // Auth link -- добавляет token в каждый запрос const authLink = setContext((_, { headers }) => { const token = localStorage.getItem('auth_token') return { headers: { ...headers, authorization: token ? `Bearer ${token}` : '', }, } }) // Error link -- обработка ошибок const errorLink = onError(({ graphQLErrors, networkError }) => { if (graphQLErrors) { for (const { message, locations, path } of graphQLErrors) { console.error( `[GraphQL error]: Message: ${message}, Path: ${path}`, locations ) // 401 -- редирект на логин if (message.includes('Unauthorized')) { localStorage.removeItem('auth_token') window.location.href = '/login' } } } if (networkError) { console.error(`[Network error]: ${networkError}`) } }) // Собираем клиент export const apolloClient = new ApolloClient({ link: from([errorLink, authLink, httpLink]), cache: new InMemoryCache({ typePolicies: { Query: { fields: { // Pagination: merge новых результатов с кешем posts: { keyArgs: ['category'], merge(existing = [], incoming) { return [...existing, ...incoming] }, }, }, }, User: { // Кеширование по кастомному полю вместо id keyFields: ['email'], }, }, }), defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network', }, }, }) ``` Подключение к Vue: ```javascript // main.js import { createApp } from 'vue' import { DefaultApolloClient } from '@vue/apollo-composable' import { apolloClient } from './apollo/client' import App from './App.vue' const app = createApp(App) app.provide(DefaultApolloClient, apolloClient) app.mount('#app') ``` Queries: ```javascript // graphql/queries/posts.js import { gql } from '@apollo/client/core' export const GET_POSTS = gql` query GetPosts($category: String, $limit: Int, $offset: Int) { posts(category: $category, limit: $limit, offset: $offset) { id title excerpt author { id name avatar } createdAt } } ` export const GET_POST = gql` query GetPost($id: ID!) { post(id: $id) { id title content author { id name } comments { id text author { name } } } } ` ``` Использование useQuery: ```vue ``` Mutations: ```javascript // graphql/mutations/posts.js import { gql } from '@apollo/client/core' export const CREATE_POST = gql` mutation CreatePost($input: CreatePostInput!) { createPost(input: $input) { id title content author { id name } } } ` export const DELETE_POST = gql` mutation DeletePost($id: ID!) { deletePost(id: $id) { id } } ` ``` ```vue ``` --- ## 📌 Реальные кейсы 🔹 **Composable-обёртка для типизированных запросов:** ```javascript // composables/usePosts.js import { computed } from 'vue' import { useQuery, useMutation } from '@vue/apollo-composable' import { GET_POSTS, GET_POST } from '@/graphql/queries/posts' import { CREATE_POST, DELETE_POST } from '@/graphql/mutations/posts' export function usePosts(category) { const { result, loading, error, fetchMore } = useQuery( GET_POSTS, computed(() => ({ category: category.value, limit: 10, offset: 0 })) ) const posts = computed(() => result.value?.posts ?? []) async function loadMore() { await fetchMore({ variables: { offset: posts.value.length } }) } return { posts, loading, error, loadMore } } export function usePost(id) { const { result, loading, error } = useQuery(GET_POST, { id }) const post = computed(() => result.value?.post ?? null) return { post, loading, error } } export function useCreatePost() { const { mutate, loading, error } = useMutation(CREATE_POST) return { create: (input) => mutate({ input }), loading, error, } } ``` 🔹 **Polling -- автообновление данных каждые N секунд:** ```javascript const { result, startPolling, stopPolling } = useQuery(GET_LIVE_STATS, null, { pollInterval: 5000, // Каждые 5 секунд }) // Останавливаем при уходе со страницы onUnmounted(() => stopPolling()) ``` --- ## Частые ошибки ❌ Забыть `DefaultApolloClient` provide: ```javascript // main.js const app = createApp(App) // Забыли app.provide(DefaultApolloClient, apolloClient) app.mount('#app') // useQuery() выбросит: "Apollo client with id default not found" ``` ✅ Всегда provide в main.js: ```javascript app.provide(DefaultApolloClient, apolloClient) ``` --- ❌ Мутировать `result.value` напрямую: ```javascript const { result } = useQuery(GET_POSTS) result.value.posts.push(newPost) // Может сломать кеш Apollo ``` ✅ Обновляй через кеш Apollo: ```javascript cache.writeQuery({ query: GET_POSTS, data: { posts: [...existingPosts, newPost] }, }) ``` --- ❌ Деструктуризация result без computed: ```javascript const { result } = useQuery(GET_POSTS) const posts = result.value?.posts // НЕ реактивно! Значение зафиксировано ``` ✅ Всегда computed: ```javascript const posts = computed(() => result.value?.posts ?? []) ``` --- ## Резюме | Composable | Назначение | |-----------|-----------| | `useQuery` | Чтение данных, автоматический рефетч при смене переменных | | `useMutation` | Запись данных, оптимистичные обновления | | `useLazyQuery` | Query по требованию (не при mount) | | `useSubscription` | Real-time подписки (WebSocket) | | `fetchMore` | Пагинация (подгрузка следующей страницы) | | `refetch` | Принудительный перезапрос | ---

Как интегрировать GraphQL (Apollo Client) с Vue?