Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with telemetry in client components #299

Open
2nPlusOne opened this issue May 14, 2024 · 1 comment
Open

Issues with telemetry in client components #299

2nPlusOne opened this issue May 14, 2024 · 1 comment

Comments

@2nPlusOne
Copy link

2nPlusOne commented May 14, 2024

Howdy,

My team and I have been using the experimental package for a few months now as we build up our Next.js 14 app. It's been working quite well! However, we recently started to implement telemetry, and have ran into some issues related to the package.
 

What works

We followed the guide on the blog, and were able to get telemetry working for queries called from the server.

import { ApolloClient, InMemooryCache, from } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";

const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: from([splitLink]),
    defaultOptions: {
      query: {
        fetchPolicy: "no-cache",
      },
    },
  }),
});

As expected, when a query is made using getClient().query, the query traces show up on the Jaeger UI, and the context progagates properly to the backend service.

What doesn't work

When making queries from the client using useQuery from the experimental package, the traces do not show up on Jaeger.

function makeClient() {
  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            splitLink // Chooses between http and websock links (pulled from the apollo docs)
          ])
        : from([splitLink]),
  });
}
@phryneas
Copy link
Member

I assume that you want to track queries happening on the server here, not what's happening in the user's browser?

useQuery doesn't make any api requests during SSR. Next.js will only let you do one render, so you'd only get a loading state in SSR, no matter if a request were made or not.
If you want to make requests and have the results rendered during SSR, you'll have to use the useSuspenseQuery hook, because that one will pause React rendering until the request is done and stream the result to the browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants