Why can't I use it? Is there something wrong

[eugle]

Is there a misunderstanding somewhere? GetClient retrieves data from the server. According to the example code, I cannot obtain the data. I request help. Thank you

"dependencies": {
        "@apollo/client": "^3.9.10",
        "@apollo/experimental-nextjs-app-support": "^0.10.0",
        "@headlessui/react": "^1.7.18",
        "@heroicons/react": "^2.1.3",
        "@next/bundle-analyzer": "^14.1.4",
        "@popmotion/popcorn": "^0.4.4",
        "@serprex/react-motion": "^0.6.3",
        "@successtar/cogo-toast": "^5.0.6",
        "@tailwindcss/forms": "^0.5.7",
        "cross-env": "^7.0.3",
        "dayjs": "^1.11.10",
        "graphql": "^16.8.1",
        "lodash": "^4.17.21",
        "mup-disk": "^0.2.0",
        "next": "14.1.4",
        "react": "^18",
        "react-dom": "^18",
        "react-markdown": "^9.0.1",
        "react-scroll": "^1.9.0",
        "react-spinners": "^0.13.8"
    },

./app/utils/apolloClient.js

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc';

export const { getClient } = registerApolloClient(() => {
    return new ApolloClient({
        cache: new InMemoryCache(),
        link: new HttpLink({
            // this needs to be an absolute url, as relative urls cannot be used in SSR
            uri: 'http://localhost:3006/graphql',
            // you can disable result caching here if you want to
            // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
            // fetchOptions: { cache: "no-store" },
        }),
    });
});

./app/page.jsx

import { gql } from '@apollo/client';
import { getClient } from '@/app/utils/apolloClient';

const userQuery = gql`
    query {
        order(id: "1") {
            data {
                id
            }
        }
    }
`;

export default async function Home() {
    const { data } = await getClient().query({ query: userQuery });
    return <div>official home</div>;
}

result error:

 ✓ Compiled in 145ms (775 modules)
 ⨯ node_modules\@apollo\client\errors\index.js (39:0) @ new ApolloError
 ⨯ ApolloError: fetch failed
    at new Promise (<anonymous>)
    at Array.forEach (<anonymous>)
null
 ⨯ node_modules\@apollo\client\errors\index.js (39:0) @ new ApolloError
 ⨯ ApolloError: fetch failed
    at new Promise (<anonymous>)
    at Array.forEach (<anonymous>)
null
 ⨯ node_modules\@apollo\client\errors\index.js (39:0) @ new ApolloError
 ⨯ ApolloError: fetch failed
    at new Promise (<anonymous>)
    at Array.forEach (<anonymous>)
digest: "3173386294"
null

The order interface on the backend is correct, and using apollo sandbox can retrieve data normally

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[dChunikhin]

@eugle have you solved this issue? I have the same one now

[phryneas]

@dChunikhin please open a new issue with a thorough description of the problem you are experiencing. Chances are that @eugle had a different problem from you - "fetch failed" can have a thousand different reasons.