React? GraphQL ?? ??? ?? Apollo ?????

Apollo ?????? GraphQL API? ??? ??? ????? ?? ?? JavaScript ????????. ?? ?? React ???????? ?? ? ?? ???? ?? ????? ??? ? ??? ??, ??? ????, ??? ?? ? ?? ?? ??? ?? ??? ??? ?????. Apollo Client? ???? ???? ???? ???? ???? ?? ? ??? ???? GraphQL ??? ?? ??? ? ????.

Apollo ?????? React? ? ???? ??? ???? GraphQL ???? ??? ????, ??, ????? ?? ??? ???? ? ????? ?????. Redux? ?? ??? ?? ?? ?????? ???? ??? UI ????? ??? ??? ??? ?? ?? ??? ?? ??? ?????.

---

1. Apollo Client ?? ??

1. Apollo???

React ???????? Apollo ?????? ????? ?? ApolloProvider ?? ??? ??????? ???? ???. ? ?? ??? ???? React? Context API? ?? ?? ?? ?? ???? Apollo Client ????? ??? ? ????.

?:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

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

• ApolloProvider? ? ???? Apollo ????? ????? ?? ???? ?????.
• InMemoryCache? Apollo Client? ?? ??? ???? ?? ????? ????? ? ???? ?? ?? ?????.

2. ??

Apollo ???????? GraphQL ???? ???? ???? ? ??? ?????. useQuery ??? ???? React ?? ?? ??? ???? ??? ? ????. ? ??? ??, ?? ?? ? ??? ???? ?????.

?:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

• useQuery? ????? ????? GET_ITEMS ??? ???? ??, ?? ? ??? ??? ?????.
• Apollo Client? ???? ??? ???? ??? ??? ?? ??? ? ?? ??????.

3. ????

??? ??? ???? ???? ? ?????(?: ??? ??, ???? ?? ??). useMutation ??? ???? React ?? ?? ??? ??? ??? ? ????.

?:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

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

• useMutation? ADD_ITEM ??? ???? ? ?????.
• ?? ??? ?? ???? ????? ?????.
• onCompleted? ???? ??? ??? ? ?? ???? ??? ? ????.

4. ??

Apollo Client? ????? ??? ?????. ? ??? ?? ?? ??? ??? ? ??? ???? ???? ???? ??? ???? ??? ????? ? ??? ???.

?:

??? ?? Apollo Client? ???? ??? ???? ???? ?? ????? ?????. ???? ??? ?? ?????. ??? ?? ?? ???? ??? ????.

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

• useQuery? ?? ???? Apollo ?????? ?????? ???? ?????.
• ???? ??? ??? ???? Apollo Client? ??? ???? ???? ??? ??????.

5. ??? ?? ? ?? ????

??? ?????? ??? ? ??? ??? ??? ??? ????. Apollo Client? ????? "?? ??" ??? ?? ??? ??? ?? ???? ?? ???? ???? fetchMore ??? ?????.

?:

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

// Define a mutation to add a new item
const ADD_ITEM = gql`
  mutation AddItem($name: String!, $description: "String!) {"
    addItem(name: $name, description: "$description) {"
      id
      name
      description
    }
  }
`;

const AddItemForm = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [addItem, { loading, error }] = useMutation(ADD_ITEM);

  const handleSubmit = (e) => {
    e.preventDefault();
    addItem({
      variables: { name, description },
      onCompleted: (data) => {
        // Handle the data after the mutation is successful
        console.log('Item added:', data.addItem);
      },
    });
  };

  if (loading) return <p>Adding item...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="text"
        placeholder="Description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <button type="submit">Add Item</button>
    </form>
  );
};

export default AddItemForm;

• fetchMore? ???? ???? ??? ? ??? ??? ??? ?? ??? ? ? ?? ???? ??? ? ????.

---

2. GraphQL ?? ??? ?? Apollo ?????? ??? ?? ??

1. ???? ??? ????

Apollo Client? GraphQL? ???? ??? ????? ????? ??????? ??? ???? ????? ???.

2. ?? ??

??? ??? ?? Apollo Client? ??? ?? ?? ?? ??? ???? ???? ???? ??????? ???? ??????.

3. ??? ???

Apollo Client? ??? ??? ????? ?? ? ?? ??? ?????. ?? ?? ??? ??? ????? ?? ??? ??????? ???? ? ?????.

4. ??? ??? ????

Apollo ?????? ???? GraphQL ??? ???? ????? ???? ??? ? ???? React ?? ??? ? ???? ?? ??? ? ????.

5. ???? UI

Apollo ?????? ??? UI ????? ????? ??? ?? ??? ???? ?? UI? ????? ? ????. ? ?? ??? ??? ?? ???????.

---

3. ?? Apollo ????? ?????? ??

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Initialize Apollo Client with a cache
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

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

import React from 'react';
import { useQuery, gql } from '@apollo/client';

// Define a query to fetch data from the GraphQL server
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
      description
    }
  }
`;

const ItemsList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <ul>
      {data.items.map(item => (
        <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </li>
      ))}
    </ul>
  );
};

export default ItemsList;

---

4. ??

Apollo Client? React ???????? GraphQL ???? ???? ?? ??? ?????. ??? ?? ? ??, ??, ??? ?? ? ??? ??? ????? ?? ?? ??? ?????. Apollo Client? ???? ??? ?? ????? ????? ??? ????? ??? ?? ?? ???? ???? ?? ?????? ??? ??? ? ????.

---

? ??? React? GraphQL ?? ??? ?? Apollo ?????: ??? ???? ? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!