apollographql / apollographql/apollo-client-integrations

Issues with telemetry in client components

Open
#299 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

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](https://www.apollographql.com/blog/how-to-use-apollo-client-with-next-js-13), and were able to get telemetry working for queries called from the server.

```ts
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.

```ts
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]),
});
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the working registerApolloClient/getClient().query path with the failing useQuery path using NextSSRApolloClient and the client-side link configuration. Reproduce the issue with the provided client-component setup and inspect Jaeger traces. Done means client-side query traces appear in Jaeger and telemetry context propagates to the backend as it does for server queries.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, typescript
Domain
frontend, observability
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.