React Query 数据库插件：与GraphQL的集成实践

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { QueryClient, QueryClientProvider } from 'react-query';

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* App 组件内容 */}
    </QueryClientProvider>
  );
}

import { useQuery } from 'react-query';
import { gql } from 'graphql-tag';

const GET_POSTS = gql`
  query GetPosts {
    getPosts {
      id
      title
      content
    }
  }
`;

function Posts() {
  const { data, isLoading, error } = useQuery('posts', async () => {
    const response = await client.query({
      query: GET_POSTS,
    });
    return response.data.getPosts;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

import { useMutation } from 'react-query';
import { gql } from 'graphql-tag';

const ADD_POST = gql`
  mutation AddPost($title: String!, $content: String!) {
    addPost(title: $title, content: $content) {
      id
      title
      content
    }
  }
`;

function AddPostForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const mutation = useMutation(async () => {
    await client.mutate({
      mutation: ADD_POST,
      variables: {
        title,
        content,
      },
    });
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    mutation.mutate();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
      ></textarea>
      <button type="submit" disabled={mutation.isLoading}>
        Add post
      </button>
    </form>
  );
}