在浏览器中使用TypeGraphQL为阿波罗本地状态生成typedefs和解析器

npm install type-graphql apollo-cache-inmemory apollo-client apollo-link type-graphql-resolvers

import { ObjectType, Field, Resolver, Query } from "type-graphql";

@ObjectType()
class User {
  @Field()
  id: string;

  @Field()
  name: string;
}

@Resolver()
class UserResolver {
  @Query(() => User)
  user(): User {
    return {
      id: "1",
      name: "John Doe",
    };
  }
}

import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client";
import { createHttpLink } from "apollo-link-http";
import { ApolloCache } from "apollo-cache";
import { setContext } from "apollo-link-context";
import { typeGraphqlResolvers } from "type-graphql-resolvers";

// 创建HTTP链接
const httpLink = createHttpLink({
  uri: "https://api.example.com/graphql",
});

// 创建Auth上下文链接
const authLink = setContext((_, { headers }) => {
  // 添加认证信息到请求头部
  return {
    headers: {
      ...headers,
      authorization: localStorage.getItem("token") || "",
    },
  };
});

// 创建链接链
const link = ApolloLink.from([authLink, httpLink]);

// 创建缓存
const cache: ApolloCache<NormalizedCacheObject> = new InMemoryCache();

// 创建Apollo Client
const client = new ApolloClient({
  link,
  cache,
  resolvers: typeGraphqlResolvers,
});

import { getMutationFieldResolver } from "type-graphql-resolvers";

// 注册类型
cache.writeData({
  data: {
    User: {
      __typename: "User",
      id: "1",
      name: "John Doe",
    },
  },
});

// 注册解析器
cache.addResolvers({
  User: {
    user: getMutationFieldResolver("user", (_obj, _args, { cache }) => {
      const data = cache.readQuery({ query: GET_USER_QUERY });
      return data.User;
    }),
  },
});

import { useQuery } from "@apollo/client";
import { gql } from "graphql-tag";

const GET_USER_QUERY = gql`
  query GetUser {
    user {
      id
      name
    }
  }
`;

function UserProfile() {
  const { data } = useQuery(GET_USER_QUERY);

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

  const { user } = data;

  return (
    <div>
      <h2>User Profile</h2>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
    </div>
  );
}