如何使用Apollo或Relay等庫在React中實現(xiàn)GraphQL

要在React中使用GraphQL，您可以通過使用Apollo或Relay等庫來實現(xiàn)。下面是一個簡單的步驟來使用Apollo在React中實現(xiàn)GraphQL：

1. 安裝所需的軟件包： 首先，在您的項目中安裝必需的軟件包。使用以下命令安裝Apollo Client：

npm install @apollo/client graphql

2. 設(shè)置Apollo Client： 在您的應(yīng)用程序中設(shè)置Apollo Client。創(chuàng)建一個新的Apollo Client實例，并將其包裝在< ApolloProvider >組件中。這將使您的整個應(yīng)用程序能夠訪問GraphQL數(shù)據(jù)。

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

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

const App = () => (
  <ApolloProvider client={client}>
    <YourApp />
  </ApolloProvider>
);

3. 查詢數(shù)據(jù)： 使用< useQuery >鉤子來在組件中查詢數(shù)據(jù)。將您的GraphQL查詢傳遞給< useQuery >，并在組件中訪問數(shù)據(jù)和加載狀態(tài)。

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

const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
      author
    }
  }
`;

const BooksList = () => {
  const { loading, error, data } = useQuery(GET_BOOKS);

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

  return (
    <ul>
      {data.books.map(book => (
        <li key={book.id}>{book.title} by {book.author}</li>
      ))}
    </ul>
  );
};

4. 更改數(shù)據(jù)： 使用< useMutation >鉤子來更改數(shù)據(jù)。將您的GraphQL變異傳遞給< useMutation >，并在組件中調(diào)用該變異。

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

const ADD_BOOK = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

const AddBookForm = () => {
  let titleInput, authorInput;

  const [addBook] = useMutation(ADD_BOOK);

  const handleSubmit = e => {
    e.preventDefault();

    addBook({
      variables: {
        title: titleInput.value,
        author: authorInput.value
      }
    });

    titleInput.value = '';
    authorInput.value = '';
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={node => { titleInput = node; }} />
      <input ref={node => { authorInput = node; }} />
      <button type="submit">Add Book</button>
    </form>
  );
};

這些步驟向您展示了如何在React中使用Apollo Client來實現(xiàn)GraphQL。您可以根據(jù)您的需求和項目來進一步擴展和調(diào)整這些示例。