我有以下 root.tsx 文件：
import { ApolloClient, createHttpLink, InMemoryCache, ApolloProvider } from "@apollo/client";
import { LinksFunction } from "@remix-run/node";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import styleLink from "~/tailwind.css?url";
export function Layout({ children }: { children: React.ReactNode }) {
const graphQLClient = new ApolloClient({
ssrMode: true,
link: createHttpLink({
uri: 'https://countries.trevorblades.com/graphql',
headers: {
'Access-Control-Allow-Origin': '*',
},
}),
cache: new InMemoryCache(),
});
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<ApolloProvider client={graphQLClient}>
{children}
<ScrollRestoration />
<Scripts />
</ApolloProvider>
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styleLink }
];
我收到以下错误：
[vite] 未找到名为“ApolloProvider”的导出。请求的模块“@apollo/client”是一个 CommonJS 模块，它可能不支持所有 module.exports 作为命名导出。 CommonJS 模块始终可以通过默认导出导入，例如使用： 从'@apollo/client'导入pkg； const {ApolloClient，createHttpLink，InMemoryCache，ApolloProvider} = pkg;
现在我可以导入整个包来解决问题，例如：
import * as apollo from "@apollo/client";
import { LinksFunction } from "@remix-run/node";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import styleLink from "~/tailwind.css?url";
export function Layout({ children }: { children: React.ReactNode }) {
const graphQLClient = new apollo.ApolloClient({
ssrMode: true,
link: apollo.createHttpLink({
uri: 'https://countries.trevorblades.com/graphql',
headers: {
'Access-Control-Allow-Origin': '*',
},
}),
cache: new apollo.InMemoryCache(),
});
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<apollo.ApolloProvider client={graphQLClient}>
{children}
<ScrollRestoration />
<Scripts />
</apollo.ApolloProvider>
</body>
</html>
);
}
export default function App() {
return <Outlet />;
}
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styleLink }
];
但这会带来以下问题：
假设您有一个不同的 requests.ts 文件：
import {gql} from "@apollo/client";
export const GET_ALL_NOTES = gql`
query GetNotes {
getNotes {
title,
content,
uid,
}
}
`;
这是有效的，因为 apollo 在导入 .ts 文件时不会给出 CommonJS 错误，但是如果我将 GET_ALL_NOTES 导入到另一个 .tsx 文件中，apollo 将给出导入 gql 时的 CommonJS 错误，如果我是将整个包导入到querys.ts中：
import * as apollo from "@apollo/client";
export const GET_ALL_NOTES = apollo.gql`
query GetNotes {
getNotes {
title,
content,
uid,
}
}
`;
产生不同类型的错误：
vite_ssr_import_0.gql 不是函数
我可以做什么来解决这个问题？
通常，从
"@apollo/client""@apollo/client/index.js"我建议你尝试一下。