I have created a next js project and setup apolo-client. I have rapped my children with it.
this is my layout.tsx file code –
import { Inter } from "next/font/google";
import "./globals.css";
import ApolloProviderClient from "@/components/ApolloProviderClient";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ApolloProviderClient>
{children}
</ApolloProviderClient>
</body>
</html>
);
}
and ApolloProviderClient code –
"use client";
`import { ApolloProvider } from "@apollo/client";
import { CheckoutProviderOwn } from "@/context/checkoutContextOwn";
import { SingleTimeLoader } from "@/components/singleTimeLoader/SingleTimeLoader";
import { client } from "@/utils/apollo-clients";
const ApolloProviderClient = ({ children }: { children: React.ReactNode }) => {
return (
<ApolloProvider client={client}>
<CheckoutProviderOwn client={client}>
<SingleTimeLoader />
{children}
</CheckoutProviderOwn>
</ApolloProvider>
);
};
export default ApolloProviderClient;`
and client code is this
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { baseUrl } from "@/utils/constant/baseUrl";
const httpLink = createHttpLink({
uri: baseUrl,
});
const authLink = setContext((_, { headers }) => {
const sessionToken = sessionStorage.getItem("accessToken");
const localToken = localStorage.getItem("accessToken");
const token = sessionToken || localToken;
return {
headers: {
...headers,
Authorization: token ? `Bearer ${token}` : "",
},
};
});
export const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
so how can I create a ssr component & call a graphql api fetch data & display it without using “use client”
I wanted to create a product page where I want to so all the product with SSR because of SEO perpos.