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

Initializing ApolloClient before DataDog RUM causes GraphQL calls to not have the correct headers #11801

Closed
vacas opened this issue Apr 22, 2024 · 5 comments
Labels
🏓 awaiting-contributor-response requires input from a contributor

Comments

@vacas
Copy link

vacas commented Apr 22, 2024

Original Issue

I believe this issue should have been solved with #8603 and only occur in Apollo Client versions before v3.4.6.

As a result, I'm going to close this issue.
If it is still occurring in newer versions, please give this a bump so I'll reopen, or open a new issue :)

Originally posted by @phryneas in #7130 (comment)

Hello! 👋🏻

I recently came across this issue in my code where we were initializing the Apollo Client before initializing the DataDog RUM package. I was able to fix this by moving the DataDog initialization higher up in the tree (in the same file as where the render(...) function is used), but I thought I would call it out here. I'll add some pseudo-code samples since this is hard to reproduce without a public DataDog account.

Package versions:

  • "@apollo/client": "^3.9.10"
  • "@datadog/browser-rum": "^5.15.0"
  • "react": "^18.2.0"

Code Sample

ApolloClientProvider.jsx

const createApolloClient = () => {
  const api1Link = new HttpLink({
    uri: 'https://api1.com',
    fetch,
  });

  const api2Link = new HttpLink({
    uri: 'https://api2.com',
    fetch,
  });
  return {
    client: new ApolloClient({
      cache: new InMemoryCache({
        typePolicies: {
          ... // omitted
        },
      }),
      link: from([
        createAuthMiddleware(), // very basic authentication middleware
        createErrorHandlerMiddleware(), // very basic error handling
        specErrorsContextLink, // adding spec errors from GraphQL if present
        ApolloLink.split(api1Link, api2Link),
      ]),
    }),
  };
};

export const ApolloClientProvider = ({
  children,
}) => {
  const { client } = createApolloClient();

  return (
    <ApolloProvider client={client}>{children}</ApolloProvider>
  );
};

DataDogRumProvider.jsx

import { datadogRum } from '@datadog/browser-rum';

export const DataDogRumProvider = ({ children }) => {
  useEffect(() => {
    datadogRum.init({
      applicationId: 'appId123',
      clientToken: 'clientToken123',
      site: 'datadog',
      service: 'service1',
      env: 'production',
      version: '1.0',
      sessionSampleRate: 100,
      sessionReplaySampleRate: 100,
      telemetrySampleRate: 100,
      trackSessionAcrossSubdomains: true,
      trackUserInteractions: true,
      trackResources: true,
      trackLongTasks: true,
      allowedTracingUrls: [
        'https://api1.com',
        'https://api2.com'
      ],
      enableExperimentalFeatures: ['clickmap', 'feature_flags'],
    });
    datadogRum.startSessionReplayRecording();
  }, []);

  return (
    <Provider
      value={{ 
        ... // omitted
      }}
    >
      {children}
    </Provider>
  );
}

Application.jsx

export const Application = () => {
  return (
    <ApolloClientProvider>
      <DataDogRumProvider>
        <Router>
          <Switch>
            <Route path={'/login'} component={Login} />
            <Route path={'/app'} component={App} />
            <Route path={'/logout'} component={Logout} />
          </Switch>
        </Router>
      </DataDogRumProvider>
    </ApolloClientProvider>
  )
}

With this implementation, you should see that none of the x-datadog-* headers are present in the request header of any of the GraphQL requests, and I believe it is very tied to what was highlighted in #7130.

Let me know if you need any additional details, yes?

Cheers!

@phryneas
Copy link
Member

Yes, that's because you manually pass fetch into HttpLink which means "take exactly this fetch" implementation.

This should fix it:

const api1Link = new HttpLink({
    uri: 'https://api1.com/',
-    fetch,
  });

@vacas
Copy link
Author

vacas commented Apr 23, 2024

Hey! Thanks for your response, @phryneas 😄

Let me take a closer look into this to confirm if that fixes the problem, and I'll get back to you, yes?

@jerelmiller jerelmiller added the 🏓 awaiting-contributor-response requires input from a contributor label Apr 23, 2024
@vacas
Copy link
Author

vacas commented Apr 23, 2024

@phryneas, just tested it, and you are absolutely right! That did the trick 🎉

It seems like we were implementing this most likely because we used to have SSR and used to use node-fetch at some point (this was implemented before our time). Since we moved to Vite recently, we don't need this implementation anymore, and this was just an oversight on our part.

Thanks for the quick response! Cheers 🍻

@vacas vacas closed this as completed Apr 23, 2024
Copy link
Contributor

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.

Copy link
Contributor

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 24, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🏓 awaiting-contributor-response requires input from a contributor
Projects
None yet
Development

No branches or pull requests

3 participants