How to integrate Direct Usage with Graph API

[ethanIncentify]

TypeError: Protocol "http:" not supported. Expected "https:"TypeError [ERR_INVALID_PROTOCOL]: Protocol "http:" not supported. Expected "https:"

Here is an error message I while trying to integrate my mocks with react testing library and jest. Our app is CRA. We're also using react-router-dom, and our component is tied to the route

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { MemoryRouter as Router, Route } from 'react-router-dom';
import { render, screen } from '@testing-library/react';
import apollo from './apolloClient';
import ProjectHeader from './ProjectHeader';

it('has a test', async () => {
  const { container } = render(
    <ApolloProvider client={apollo}>
      <Router initialEntries={['/project/1']}>
        <Route path='/project/:projectId'>
          <ProjectHeader />
        </Route>
      </Router>
    </ApolloProvider>,
    {}
  );

I noticed that there is documentation about the need for an absolute path, and example for a rest api. Is there any documentation on what should I do for a graph api?

[Artem Zakharchenko]

Hey, @ethanIncentify.

Could you please show how you set up the setupWorker call in your tests?

(from the docs) Bear in mind that without a DOM-like environment, like the jsdom from Jest, you must use absolute request URLs in NodeJS

It seems like you are running your tests with Jest, which runs in a jsdom environment by default. The comment above does not apply to your usage. The error message you are experiencing is most likely because a request you are mocking is not the request your app makes.

[ethanIncentify]

here is the browser.ts file

import { setupWorker } from 'msw';
import { handlers } from './handlers';

const worker = setupWorker(...handlers);

export { worker };

I can't show you the entirety of the apollo variable provided to the ApolloProvider above, but generally the Apollo client looks like this

const customFetch = async (uri, init) => {
  try {
    const response = await fetch(uri, init);

    // ...

    return response;
  } catch (e) {
    handleErrors(e)
  }
}

const graqhQLLink = createHttpLink({ 
  uri: `${process.env.REACT_APP_URL}graphql`, // the env variable follows https protocol
  fetch: customFetch
});

const apollo = new ApolloClient({
  link: ApolloLink.from([/* other links */, graphQLLink]),
  cache: new InMemoryCache(),
});

[ethanIncentify]

@kettanaito Thanks for the hint, I was making an ajax call in the customFetch to an endpoint outside of ${process.env.REACT_APP_URL}graphql. Creating a separate ApolloProvider specific for the testing environment seems to do the trick. Closing this issue.