I’m having some issues with connecting our magento backend url with Next js App
The api request isn’t working correctly and give self signed certificate error
My apollo client
import { useMemo } from "react";
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { concatPagination } from '@apollo/client/utilities'
let apolloClient;
function createApolloClient() {
const uri = process.browser
? new URL('/graphql', location.href)
: new URL('/graphql', process.env.MAGENTO_BACKEND_URL).href
return new ApolloClient({
ssrMode: !process.browser,
credentials: 'include',
link: new HttpLink({
uri,
credentials: 'include', // Additional fetch() options like `credentials` or `headers`
}),
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
allPosts: concatPagination(),
},
},
},
}),
name: 'ssr',
defaultOptions: { query: { errorPolicy: 'all' } },
})
}
export function initializeApollo(initialState = null) {
const _apolloClient = apolloClient ?? createApolloClient();
/* If your page has Next.js data fetching methods that use Apollo Client, the initial stategets hydrated here*/
if (initialState) {
// Get existing cache, loaded during client side data fetching
const existingCache = _apolloClient.extract();
/* Restore the cache using the data passed from
getStaticProps/getServerSideProps combined with the existing
cached data */
_apolloClient.cache.restore({ ...existingCache, ...initialState});
}
// 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 useApollo(initialState) {
const store =
useMemo(() => initializeApollo(initialState),[initialState]);
return store;
}
export const client = initializeApollo();
And layout providers
"use client";
import Footer from "./components/main/Footer";
import Header from "./components/main/Header";
import "./globals.css";
import { Inter } from "next/font/google";
import { useStyleConfig } from "../app/peregrine/lib/talons/Configuration/useStyle";
import { useEffect } from "react";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "./lib/apolloClient";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({ children }) {
const apolloClient = useApollo();
const { applyStyles } = useStyleConfig();
useEffect(() => {
applyStyles();
}, []);
return (
<html lang="en">
<body className={inter.className}>
<Header />
<ApolloProvider client={apolloClient}>{children}</ApolloProvider>
<Footer />
</body>
</html>
);
}
next.config
const path = require("path");
const { URL } = require("url");
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /.(graphql|gql)$/,
loader: "graphql-tag/loader",
});
config.resolve.alias = {
...config.resolve.alias,
"~": path.resolve(__dirname),
};
return config;
},
async rewrites() {
return [
{
source: "/graphql/:pathname*",
destination: new URL("graphql", process.env.MAGENTO_BACKEND_URL).href,
},
{
source: "/lms/:path*",
destination: process.env.CSR_URL,
},
{
source: "/csr/:path*",
destination: process.env.LMS_URL,
},
{
source: "/api/:path*",
destination: process.env.KONG_URL,
},
{
source: "/css|env|logo/:path*",
destination: process.env.MAGENTO_BACKEND_URL,
},
{
source: "/graphql|rest|media/:path*",
destination: process.env.MAGENTO_BACKEND_URL,
},
];
},
};
I’m getting this error all the time
