Attempted to call the default export of C:UsersTeyllayDesktopss.lvfrontendsrcappapollo.ts from the server but it’s on the client

Question

so problem is i want to query user info when entering user page like website/user/1
but when i want enter page i’m getting error, i think it’s from apollo, so is there a way to fix this? what i did wrong?

apollo.ts:

"use client";
import { ApolloClient, InMemoryCache } from "@apollo/client";

const createApolloClient = () => {
  return new ApolloClient({
    uri: "https://localhost:8000/",
    cache: new InMemoryCache(),
  });
};

export default createApolloClient;

layouts.tsx:

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ApolloProvider } from "@apollo/client";
import createApolloClient from "./apollo";

const inter = Inter({ subsets: ["latin"] });
const client = createApolloClient();

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ApolloProvider client={client}>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </ApolloProvider>
  );
}

user/[userId]/page.tsx:

import { useQuery } from "@apollo/client";
import { GET_USER } from "@/graphql/user";

export default function Page({ params }: { params: { userId: string } }) {
  const userId = parseInt(params.userId);
  if (isNaN(userId)) {
    return <h1>user not found</h1>;
  }

  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const { getUser: user } = data;

  console.log(user);

  return (
    <>
      <h1>
        user: {user.name} {user.surname}
      </h1>
      <h1>advert:</h1>
      {user.adverts.map((advert: any) => (
        <li key={advert.id}>
          {advert.location}, {advert.price}
        </li>
      ))}
    </>
  );
}

get_user query:

import { ApolloClient, InMemoryCache, gql } from "@apollo/client";

export const GET_USER = gql`
  query GetUser($id: Int!) {
    getUser(id: $id) {
      phone
      email
      name
      surname
      adverts {
        id
        location
        price
      }
    }
  }
`;

i searched some info on web but i didn`t find solution

Attempted to call the default export of C:UsersTeyllayDesktopss.lvfrontendsrcappapollo.ts from the server but it’s on the client

Attempted to call the default export of C:UsersTeyllayDesktopss.lvfrontendsrcappapollo.ts from the server but it’s on the client

0

Leave a Reply Cancel reply