提问人:Konstantinos Kaskantiris 提问时间:11/25/2022 最后编辑:Konstantinos Kaskantiris 更新时间:11/27/2022 访问量:194
如何通过 Schema Link 将 GraphQL 模式从我的 express-graphql 服务器导入到我的 apollo 客户端
How to import a GraphQL schema from my express-graphql server to my apollo client via Schema Link
问:
所以我的问题是我已经创建了一个项目并且我有 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方法会更可取。因此,如果有人知道答案,这个问题仍然悬而未决。现在我找到了解决我问题的方法。
答: 暂无答案
评论