Qeyd dəftərçəsi olan köməkçini təsəvvür edin. Ondan postların siyahısını öyrənməyi xahiş edirsiniz: o, serverə gedir, cavabı gətirir və dəftərə yazır — özü də necə gəldi yox, «kartlar» üzrə. Hər postun öz kartı Post:1, hər müəllifin User:7 var. Növbəti dəfə köməkçi cavabı dəftərdən verir, kart dəyişəndə isə onu göstərən bütün ekranlara özü xəbər verir. Apollo Client məhz belədir: o, GraphQL sorğularını, yüklənmə və xəta vəziyyətlərini, keşi və interfeysin yenilənməsini idarə edir. Bu dərsdə onu blogun React müştərisinə qoşacaq, postların siyahısını göstərəcək, forma əlavə edəcək, mutation-lardan sonra keşi yeniləməyi və JWT göndərməyi öyrənəcəksiniz.

GraphQL müştərisi nə verir

Birinci dərsdəki kimi sadə fetch ilə də keçinmək olar, amma loading və error-u əllə izləmək, təkrar sorğulardan qaçmaq və mutation-dan sonra bütün ekranların yeni məlumatı göstərdiyinə əmin olmaq lazım gələcək. Müştəri bunları sizin əvəzinizə edir. Bildiyinizlə müqayisə edək:

  • Apollo Client GraphQL-i başa düşür və məlumatı normallaşdırılmış saxlayır: sorğular üzrə yox, obyektlər üzrə. Ən məşhur seçimdir.
  • TanStack Query (React mövzusu) cavabları sorğu açarları üzrə keşləyir və istənilən API-yə yarayır, amma GraphQL obyektlərini «tanımır».
  • urql yüngül müştəridir: defolt olaraq sənədləri bütövlükdə keşləyir, normallaşdırılmış keş isə ayrıca paketlə qoşulur.

Apollo Client-i qoşuruq

Vite layihəsi yaradın və paketləri quraşdırın. Apollo Client 4 üçün əlavə olaraq rxjs lazımdır. Serverin ünvanı .env-dədir: Vite brauzerə yalnız VITE_ prefiksi olan dəyişənləri verir.

bash
npm create vite@latest blog-web -- --template react-ts
cd blog-web
npm install @apollo/client graphql rxjs
# then create .env with the line: VITE_GRAPHQL_URL=http://localhost:4000/graphql

4-cü versiyada serverə link açıq şəkildə yaradılır (new HttpLink), hook-lar və ApolloProvider isə @apollo/client/react-dən götürülür. Müştəri bir dəfə yaradılır və tətbiq onunla əhatə olunur:

tsx
// src/apollo.ts
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';

export const client = new ApolloClient({
  link: new HttpLink({ uri: import.meta.env.VITE_GRAPHQL_URL }),
  cache: new InMemoryCache(),
});

// src/main.tsx
import { ApolloProvider } from '@apollo/client/react';
import { client } from './apollo.ts';

createRoot(document.getElementById('root')!).render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
);

useQuery: postların siyahısı

Sorğu gql şablon sətrində yazılır. useQuery hook-u onu komponent ilk dəfə göstəriləndə göndərir və vəziyyəti qaytarır:

tsx
// src/PostList.tsx
import { gql } from '@apollo/client';
import { useQuery } from '@apollo/client/react';

type Post = { id: string; title: string; author: { name: string } };

const POSTS = gql`
  query Posts($published: Boolean) {
    posts(published: $published) {
      id
      title
      author { id name }
    }
  }
`;

export function PostList() {
  const { data, loading, error, refetch } = useQuery<{ posts: Post[] }>(
    POSTS,
    { variables: { published: true } },
  );

  if (loading && !data) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;