软件测试 / 测试开发 / 全日制 |Python 全栈开发：构建基于 GraphQL 的现代 Web 应用

# 以Django为例，在`schema.py`中定义GraphQL Schema
import graphene
class UserType(graphene.ObjectType):    id = graphene.ID()    username = graphene.String()    email = graphene.String()
class Query(graphene.ObjectType):    user = graphene.Field(UserType, id=graphene.ID())
    def resolve_user(self, info, id):        # 从数据库中获取用户数据        user_data = get_user_by_id(id)        return UserType(**user_data)
schema = graphene.Schema(query=Query)

# 以Django为例，在`views.py`中处理GraphQL请求
from django.http import JsonResponsefrom django.views.decorators.csrf import csrf_exemptfrom graphene_django.views import GraphQLView
@csrf_exemptdef graphql_view(request):    response = GraphQLView.as_view(graphiql=True, schema=schema)(request)    return response

// 在React中使用Apollo Client
import React from 'react';import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';import { gql } from '@apollo/client';
const client = new ApolloClient({  uri: 'http://localhost:8000/graphql',  cache: new InMemoryCache(),});
const App = () => {  // 发送GraphQL查询  const { loading, error, data } = useQuery(    gql`      query {        user(id: "1") {          id          username          email        }      }    `,  );
  if (loading) return <p>Loading...</p>;  if (error) return <p>Error: {error.message}</p>;
  return (    <div>      <p>User ID: {data.user.id}</p>      <p>Username: {data.user.username}</p>      <p>Email: {data.user.email}</p>    </div>  );};
const WrappedApp = () => (  <ApolloProvider client={client}>    <App />  </ApolloProvider>);
export default WrappedApp;

# 在`schema.py`中定义变更操作
class CreateUser(graphene.Mutation):    class Arguments:        username = graphene.String()        email = graphene.String()
    user = graphene.Field(UserType)
    def mutate(self, info, username, email):        user = create_user(username, email)        return CreateUser(user=user)
class Mutation(graphene.ObjectType):    create_user = CreateUser.Field()
schema = graphene.Schema(query=Query, mutation=Mutation)

// 在React中使用useMutation hook
import React from 'react';import { useMutation } from '@apollo/client';import { gql } from '@apollo/client';
const CREATE_USER = gql`  mutation CreateUser($username: String!, $email: String!) {    createUser(username: $username, email: $email) {      user {        id        username        email      }    }  }`;
const CreateUserForm = () => {  const [createUser, { data }] = useMutation(CREATE_USER);
  const handleSubmit = (event) => {    event.preventDefault();
    createUser({      variables: {        username: event.target.username.value,        email: event.target.email.value,      },    });  };
  return (    <form onSubmit={handleSubmit}>      <label>        Username:        <input type="text" name="username" />      </label>      <label>        Email:        <input type="text" name="email" />      </label>      <button type="submit">Create User</button>    </form>  );};
export default CreateUserForm;

# 在`schema.py`中定义订阅操作
class Subscription(graphene.ObjectType):    user_created = graphene.Field(UserType)
    async def resolve_user_created(root, info):        # 使用异步迭代器推送新用户数据        async for event in user_created_subscription():            yield CreateUser(user=event)

// 在React中使用useSubscription hook
import React from 'react';import { useSubscription } from '@apollo/client';import { gql } from '@apollo/client';
const USER_CREATED_SUBSCRIPTION = gql`  subscription {    userCreated {      user {        id        username        email      }    }  }`;
const RealtimeUserList = () => {  const { data } = useSubscription(USER_CREATED_SUBSCRIPTION);
  if (!data) return null;
  const newUser = data.userCreated.user;
  return (    <div>      <p>New User Created:</p>      <p>ID: {newUser.id}</p>      <p>Username: {newUser.username}</p>      <p>Email: {newUser.email}</p>    </div>  );};
export default RealtimeUserList;