apollographql / apollographql/apollo-client-integrations
Issues with telemetry in client components
- 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