如何通过 Schema Link 将 GraphQL 模式从我的 express-graphql 服务器导入到我的 apollo 客户端

How to import a GraphQL schema from my express-graphql server to my apollo client via Schema Link

提问人:Konstantinos Kaskantiris 提问时间:11/25/2022 最后编辑:Konstantinos Kaskantiris 更新时间:11/27/2022 访问量:194

问:

所以我的问题是我已经创建了一个项目并且我有 2 个 separete 文件夹。 一个用于服务器端,一个用于客户端。我尝试根据 ben awad的 yt 教程制作一个 reddit 克隆,自从实现以来发生了很多变化。 所以在服务器端,除了 express 和 typegraphql redis 和 typeorm 之外,我还使用 apollo 服务器。 在客户端,除了打字稿外,我还使用 apollo 客户端和 nextjs。

因此,我想根据 nextjs 的文档在客户端执行 SSR(服务器端渲染),并且根据教程,使用的方法已弃用。所以我在过去的 2 天里一直在寻找解决方案,但没有任何结果。 我 https://github.com/vercel/next.js/tree/canary/examples/with-apollo/lib 遵循这种方法,但我遇到了一个问题。在此方法中,我将 apolloClient 文件更改为

import {
  ApolloClient,
  from,
  HttpLink,
  InMemoryCache,
  NormalizedCacheObject,
} from "@apollo/client";
import { SchemaLink } from "@apollo/client/link/schema";
import merge from "deepmerge";
import isEqual from "lodash/isEqual";
import { useMemo } from "react";

export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";

let apolloClient: ApolloClient<NormalizedCacheObject> | null = null;

type SchemaContext =
  | SchemaLink.ResolverContext
  | SchemaLink.ResolverContextFunction;

function createIsomorphicLink(ctx?: SchemaContext) {
  if (typeof window === "undefined") {
    const { schema } = require("../modules/graphql/schema");
    return new SchemaLink({
      schema,
      context: ctx,
    });
  }
  const httpLink = new HttpLink({
    uri: "http://localhost:3000/api/graphql",
    credentials: "same-origin",
  });
  return from([httpLink]);
}

function createApolloClient(ctx?: SchemaContext) {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: createIsomorphicLink(ctx || undefined),
    cache: new InMemoryCache(),
  });
}

interface InitApollo {
  initialState?: any;
  ctx?: SchemaContext;
}

export function initializeApollo({ ctx, initialState }: InitApollo) {
  const _apolloClient =
    apolloClient ?? createApolloClient(ctx || undefined);

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();

    // Merge the initialState from getStaticProps/getServerSideProps in the existing cache
    const data = merge(existingCache, initialState, {
      // combine arrays using object equality (like in sets)
      arrayMerge: (destinationArray, sourceArray) => [
        ...sourceArray,
        ...destinationArray.filter(d =>
          sourceArray.every(s => !isEqual(d, s))
        ),
      ],
    });

    // Restore the cache with the merged data
    _apolloClient.cache.restore(data);
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === "undefined") return _apolloClient;
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;

  return _apolloClient;
}

export function addApolloState(
  client: ApolloClient<NormalizedCacheObject>,
  pageProps: { props: any }
) {
  pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();

  return pageProps;
}

export function useApollo(pageProps: any) {
  const state = pageProps[APOLLO_STATE_PROP_NAME];
  const store = useMemo(
    () => initializeApollo({ initialState: state }),
    [state]
  );
  return store;
}

在这个修改后的示例中,我发现他使用了 prisma 和 nexus。

因此,当他使用 SchemaLink 时,他可以从模块文件夹中创建的 .ts 文件中获取架构 所以我想问一下是否是从 typegraphql 文档 [https://typegraphql.com/docs/emit-schema.html ] 中获取 sdl 后出现的 graphql 文件的方法,如果是这样,可以创建一个路径以便从创建它的服务器文件夹中导入/要求它。 PS. 我既没有使用 prisma 也没有使用 nexus。我只是想知道是否有办法将 graphql 文件导入打字稿,因为我发现所有相关的内容都不起作用。

编辑。。所以毕竟我发现如果我使用 HttpLink 而不是 schemaLink,我可以得到相同的结果。但是在优化方面,因为我对服务器和客户端(Localhost)使用相同的域,因此使用schemaLink方法会更可取。因此,如果有人知道答案,这个问题仍然悬而未决。现在我找到了解决我问题的方法。

TypeScript 架构 服务器端呈现 TypeGraphQL

评论


答: 暂无答案