Apollo try to connect on a wrong port

Hey there, I am trying to connect to laravel lighthouse grapql supscription using apollo in the front

My apollo configuration

import { ApolloClient }   from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache }  from 'apollo-cache-inmemory'
import { ApolloLink }     from 'apollo-link';
import { setContext }     from "apollo-link-context";

// pusher.js
import Pusher     from "pusher-js";
import PusherLink from './pusher-link';

const pusherLink = new PusherLink({
    pusher: new Pusher(import.meta.env.VITE_PUSHER_APP_KEY, {
        cluster: 'sa1',
        authEndpoint: `http://localhost:8000/graphql/subscriptions/auth`,
    })
});

const authLink = setContext(async (_, {headers}) => {
    return {
        headers: {
            ...headers,
        }
    }
});

export default new ApolloClient({
    // Provide the URL to the API server.
    link: ApolloLink.from([authLink, pusherLink, createHttpLink({uri: 'http://localhost:8000/graphql'})]),

    // Using a cache for fast subsequent queries.
    cache: new InMemoryCache(),
});

Calling it in main.js

import ApolloClient from '@/Helpers/Websocket/Apollo.js';

// Plugins Using
const app = createApp({
    setup() {
      // Provide the Apollo Client to the application
      provide(ApolloClient);
    },
    render: () => h(App),
});

but i got that error from apollo

"No connection could be made because the target machine actively refused it [tcp://127.0.0.1:6379]"

why apollo try to connect to port 6379 instead of 8000 that was used in the config

LaryAI

2 years ago

Level 58

It looks like the error you're encountering is related to a connection attempt to Redis, which by default listens on port 6379. This is not directly related to your Apollo Client configuration but rather to the Pusher configuration, which might be trying to use Redis for handling subscriptions.

Here’s a step-by-step approach to troubleshoot and potentially resolve this issue:

Verify Pusher Configuration: Ensure that your Pusher configuration does not implicitly try to connect to Redis. Pusher itself doesn't connect to Redis unless it's configured to do so, possibly in another part of your application or in the backend setup with Laravel Lighthouse.
Check Laravel Lighthouse Subscription Settings: Since you are using Laravel Lighthouse for GraphQL subscriptions, check your config/lighthouse.php or any relevant configuration related to subscriptions. Laravel Lighthouse might be configured to use Redis for subscription broadcasting.
Environment Configuration: Ensure that all environment variables related to Redis and Pusher are correctly set. For local development, these settings might be in your .env file. Check variables like BROADCAST_DRIVER, REDIS_HOST, REDIS_PASSWORD, and REDIS_PORT.
Redis Installation and Running: If your application intends to use Redis, make sure that Redis is properly installed and running on your development machine. You can check if Redis is running by using the command:
```
redis-cli ping
```
If Redis is running, it should respond with PONG.
Network Issues: The error message suggests a network connection issue to 127.0.0.1:6379. If Redis is intended to be used, ensure there are no firewall or network issues preventing the connection.
Debugging Further: If the above steps don’t resolve the issue, you might want to add logging or debugging output around the points where your application configures and initializes Pusher and Redis connections. This can help pinpoint where the erroneous connection attempt is being made.

Here is a basic check you can add to your Apollo Client setup to log the environment variables or any relevant configuration:

console.log("Pusher App Key:", import.meta.env.VITE_PUSHER_APP_KEY);
console.log("GraphQL Auth Endpoint:", `http://localhost:8000/graphql/subscriptions/auth`);

This will help ensure that your environment variables are being loaded correctly and that there are no unexpected values.

If none of these steps reveal the issue, consider isolating the subscription setup and testing it independently to rule out configuration or code issues in other parts of your application.