ApolloError: Only HTTP(S) protocols are supported (error with the apollo core client mutate function)

Help
,
1

I’m writing a unit test that requires me to send a mutation via the apollo client to my http server (created using nestjs). I’m running it locally.

Here is the entire unit test:

import { INestApplication } from '@nestjs/common';
import { Test, TestingModule } from '@nestjs/testing';
import { AppModule } from '@/core/app.module';
import { ApolloClient, InMemoryCache, gql, HttpLink } from '@apollo/client/core';
import fetch from 'cross-fetch';
describe('User (e2e)', () => {
    let app: INestApplication;

    beforeAll(async () => {
        const moduleFixture: TestingModule = await Test.createTestingModule({
            imports: [AppModule]
        }).compile();

        app = moduleFixture.createNestApplication();
        await app.init();
    });

    describe('MUT createUser()', () => {
        const client = new ApolloClient({
            link: new HttpLink({ uri: 'localhost:3000/graphql', fetch }),
            cache: new InMemoryCache()
        });

        const mutation = () => {
            try {
                const mutate = gql`
                    mutation createUser($userCreateInput: CreateUserDto!) {
                        userCreateInput(
                            userCreateInput: {
                                username: "bob"
                                email: "bob@bob.com"
                                password: "bobby"
                            }
                        )
                        active
                        createdAt
                        email
                        emailVerified
                        id
                        updatedAt
                        username
                    }`;

                console.log(mutate, 'in thing');
                return mutate;
            } catch (e) {
                console.log(e);
            }
        };

        it('should return a new user and then delete that user right after', async () => {
            try {
                const createdUser = await client.mutate({ mutation: mutation() });
                console.log(createdUser);
            } catch (e) {
                console.log(e);
            }
        });
    });
});

After bunch of syntax errors I’ve finally gotten this error which is printed in my catch statement at the bottom:

ApolloError: Only HTTP(S) protocols are supported
          at new ApolloError (/home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/errors/index.js:29:28)
          at Object.error (/home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/core/QueryManager.js:139:83)
          at notifySubscription (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:140:18)
          at onNotify (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:179:3)
          at SubscriptionObserver.error (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:240:7)
          at Object.error (/home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/utilities/observables/asyncMap.js:32:69)
          at notifySubscription (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:140:18)
          at onNotify (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:179:3)
          at SubscriptionObserver.error (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:240:7)
          at /home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/utilities/observables/iteration.js:4:68 {
        graphQLErrors: [],
        clientErrors: [],
        networkError: TypeError: Only HTTP(S) protocols are supported
            at getNodeRequestOptions (/home/paul/nest-nuxt-starter/node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.js:1331:9)
            at /home/paul/nest-nuxt-starter/node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.js:1440:19
            at new Promise (<anonymous>)
            at fetch (/home/paul/nest-nuxt-starter/node_modules/.pnpm/node-fetch@2.6.7/node_modules/node-fetch/lib/index.js:1437:9)
            at fetch (/home/paul/nest-nuxt-starter/node_modules/.pnpm/cross-fetch@3.1.5/node_modules/cross-fetch/dist/node-ponyfill.js:10:20)
            at /home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/link/http/createHttpLink.js:96:13
            at new Subscription (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:197:34)
            at Observable.subscribe (/home/paul/nest-nuxt-starter/node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js:279:14)
            at Object.complete (/home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/utilities/observables/Concast.js:60:43)
            at Concast.Object.<anonymous>.Concast.start (/home/paul/nest-nuxt-starter/node_modules/.pnpm/@apollo+client@3.6.9_graphql@15.7.2/node_modules/@apollo/client/utilities/observables/Concast.js:86:23),
        extraInfo: undefined
      }

I assumed that client.mutate would be http(s). why isn’t it?

2

Hi @pgiovanni1234 :wave: It looks like you’re missing the protocol in the URI you’re passing to the HttpLink constructor. Please try https://localhost:3000/graphql, that should take care of the error :+1: