Can’t establish a connection to the server at ws://localhost:4000/ in any browser #86

kwoxer · 2019-12-16T16:38:26Z

I have the same issue like this. I cloned https://github.com/howtographql/react-apollo and did everything like the Readme says. Except the database connection.

For my connection I use MongoDB with:

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:1.34
    restart: always
    ports:
    - "4466:4466"
    environment:
      PRISMA_CONFIG: |
        port: 4466
        # uncomment the next line and provide the env var PRISMA_MANAGEMENT_API_SECRET=my-secret to activate cluster security
        # managementApiSecret: my-secret
        databases:
          default:
            connector: mongo
            uri: 'mongodb://prisma:prisma@mongo'
  mongo:
    image: mongo:3.6
    restart: always
    # Uncomment the next two lines to connect to your your database from outside the Docker environment, e.g. using a database GUI like Compass
    # ports:
    # - "27017:27017"
    environment:
      MONGO_INITDB_ROOT_USERNAME: prisma
      MONGO_INITDB_ROOT_PASSWORD: prisma
    ports:
      - "27017:27017"
    volumes:
      - mongo:/var/lib/mongo
volumes:
  mongo:

Everything works fine. But I just get...

WebSocket connection to 'ws://localhost:4000/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Chrome:

Firefox:

I'm not sure if I need to change the ports. But the readme does not say something like that. Also the https://github.com/howtographql/react-apollo/blob/master/server/prisma/prisma.yml is missing the endpoint.

What do I need to change to get the WebSocket connection working?

The text was updated successfully, but these errors were encountered:

itofficeeu · 2019-12-30T08:07:35Z

Do you have the Docker containers running? - What comes out of the following in terminal:

docker ps

Have you started based the tutorial?...
Have you during that tutorial chosen where to create the database?...
Have you been prompted for where you want to set/deploy your service?...

If not, then could it be that you need to run

prisma init
docker-compose up -d

(WAIT SOME TIME - Probe with docker ps until the containers are stable, alias not restarting anymore))

before

prisma deploy

kwoxer · 2019-12-30T09:53:49Z

Thank you very much for your post. I read the tutorial. Then took this repository here. And I chose to use MongoDB. In the tutorial you do not describe the database parts. So I just tried it out on my own. The docker-compose.yml you already seen. Here as well the prisma.yml file:

# Specifies the HTTP endpoint of your Prisma API.
#endpoint: ''
endpoint: http://localhost:4466

# Defines your models, each model is mapped to the database as a table.
datamodel: datamodel.prisma

# Specifies the language and directory for the generated Prisma client.
generate:
  - generator: javascript-client
    output: ../src/generated/prisma-client

After that I did the following steps:

\server\prisma>docker-compose up -d

Creating network "prisma_default" with the default driver
Creating prisma_mongo_1  ... done
Creating prisma_prisma_1 ... done

\server\prisma>prisma deploy

Creating stage default for service default √
Deploying service `default` to stage `default` to server `local` 733ms

Changes:

  Link (Type)
  + Created type `Link`
  + Created field `id` of type `ID!`
  + Created field `createdAt` of type `DateTime!`
  + Created field `description` of type `String!`
  + Created field `url` of type `String!`
  + Created field `postedBy` of type `User`
  + Created field `votes` of type `[Vote!]!`

  User (Type)
  + Created type `User`
  + Created field `id` of type `ID!`
  + Created field `name` of type `String!`
  + Created field `email` of type `String!`
  + Created field `password` of type `String!`
  + Created field `links` of type `[Link!]!`
  + Created field `votes` of type `[Vote!]!`

  Vote (Type)
  + Created type `Vote`
  + Created field `id` of type `ID!`
  + Created field `link` of type `Link!`
  + Created field `user` of type `User!`

  UserToVote (Relation)
  + Created an inline relation between `User` and `Vote` in the column `votes` of table `User`

  LinkToVote (Relation)
  + Created an inline relation between `Link` and `Vote` in the column `votes` of table `Link`

  LinkToUser (Relation)
  + Created an inline relation between `Link` and `User` in the column `postedBy` of table `Link`

Applying changes 1.2s
Generating schema 37ms
Saving Prisma Client (JavaScript) at e:\Azure\peach_webserver\server\src\generated\prisma-client

Your Prisma endpoint is live:

  HTTP:  http://localhost:4466
  WS:    ws://localhost:4466

You can view & edit your data here:

  Prisma Admin: http://localhost:4466/_admin

Looks fine for me. And everything is working. Just like you can see from the images the websocket is an issue:

WebSocket connection to 'ws://localhost:4000/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

The Output of docker ps:

CONTAINER ID        IMAGE                       COMMAND                  CREATED             STATUS              PORTS                      NAMES
c67ee323f162        prismagraphql/prisma:1.34   "/bin/sh -c /app/sta…"   8 minutes ago       Up 8 minutes        0.0.0.0:4466->4466/tcp     prisma_prisma_1
20733f3435ee        mongo:3.6                   "docker-entrypoint.s…"   8 minutes ago       Up 8 minutes        0.0.0.0:27017->27017/tcp   prisma_mongo_1

\npm start

Your Prisma endpoint is live:
Compiled successfully!

You can now view hackernews-react-apollo in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.75.1:3000/

Note that the development build is not optimized.       
To create a production build, use npm run build.

So also the npm start seems for me without issues.

What else do you need from me =)

kwoxer · 2019-12-30T20:08:06Z

Maybe the reason is the following.

The error says he is listening to the Websocket under the port
WebSocket connection to 'ws://localhost:4000/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

But as you can see. The output says:
WS: ws://localhost:4466

So what do I need to change? I already tried to switch from 4466 to 4000 completely. But got an error. And I don't think this makes sense.

Any idea?

itofficeeu · 2020-01-03T20:04:40Z

Have you started the back-end as well as the front-end, next to also Docker containers?

The front-end, alias http://localhost:3000, is started from the root folder of the project with of course "npm start". With a tutorial, will you for instance see a React or a Vue start page.

The back-end, alias http://localhost:4000, is started from the folder "server", also with "npm start". That is the one where you have the "Playground" from GraphQL.

The http://localhost:4466 is the database. It runs from the Docker containers. If that is running, then will you be able see something on the local webpage (http://localhost:4466/_admin), even if the back-end does not run. (Prisma-page - do you use Prisma in your toturial?)

Can you start all three instances?...

Can you bring up all three screens in a browser?...

kwoxer · 2020-01-04T06:09:21Z

Started front-end npm start:

all fine!

Started back-end npm start:

seems also fine in the browser, but in the console I get this one when I try to access New, Top, Search, Login... maybe this is the reason?

npm start

> [email protected] start e:\Azure\peach_webserver\server
> node src/index.js

Server is running on http://localhost:4000
Error: Variable '$where' expected value of type 'LinkWhereInput' but got: {"OR":[{},{}]}. Reason: 'OR' Field 'OR' is not defined in the input type 'LinkWhereInput'. (line 1, column 8):
query ($where: LinkWhereInput) {
       ^
    at BatchedGraphQLClient.<anonymous> (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35)
    at step (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23)
    at Object.next (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53)
    at fulfilled (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: Variable '$where' expected value of type 'LinkWhereInput' but got: {"OR":[{},{}]}. Reason: 'OR' Field 'OR' is not defined in the input type 'LinkWhereInput'. (line 1, column 8):
query ($where: LinkWhereInput) {
       ^
    at BatchedGraphQLClient.<anonymous> (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35)
    at step (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23)
    at Object.next (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53)
    at fulfilled (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: Variable '$where' expected value of type 'LinkWhereInput' but got: {"OR":[{},{}]}. Reason: 'OR' Field 'OR' is not defined in the input type 'LinkWhereInput'. (line 1, column 8):
query ($where: LinkWhereInput) {
       ^
    at BatchedGraphQLClient.<anonymous> (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35)
    at step (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23)
    at Object.next (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53)
    at fulfilled (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: Variable '$where' expected value of type 'LinkWhereInput' but got: {"OR":[{},{}]}. Reason: 'OR' Field 'OR' is not defined in the input type 'LinkWhereInput'. (line 1, column 8):
query ($where: LinkWhereInput) {
       ^
    at BatchedGraphQLClient.<anonymous> (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35)
    at step (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23)
    at Object.next (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53)
    at fulfilled (e:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

database is always running via docker up:

seems fine

database admin

seems fine

itofficeeu · 2020-01-04T08:02:55Z

So the three endpoints run. That is nice.

The errors you have now are related to the schema of prisma/graphql not fitting thee query - or the other way around. You will have to update the schema and run prisma deploy ... iteratively improve your schema until it works.

This is now where the tutorial fails as an tutorial, as it isn't updated and lets you end up with something where you don't learn anything except in the hard way: You simply stuck and have to read a bunch of things like back in the old times to get wiser. The well selling "this is nice" effect is gone. Back to the hard work of learning.

Contact the creator of the tutorial and ask him what he intends. I guess, I will do the same in my case. - Maybe the tutorial is abandoned? Maybe he is sick?

kwoxer · 2020-01-04T09:12:17Z

I just again deleted the whole project. And downloaded again. Now these are my steps and experiences without changing any file:

this actually works:

So it could be something with my MongoDB. I gonna check that. Thank you.

kwoxer · 2020-01-04T12:36:55Z

It seems that the datamodel is not Mongo compatible. So this is my current Mongo Setup
docker-compose.yml

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:1.34
    restart: always
    ports:
      - '4466:4466'
    environment:
      PRISMA_CONFIG: |
        port: 4466
        databases:
          default:
            connector: mongo
            uri: mongodb://prisma:prisma@mongo
            database: local

prisma.yml

# Specifies the HTTP endpoint of your Prisma API.
endpoint: http://localhost:4466

# Defines your models, each model is mapped to the database as a table.
datamodel: datamodel.prisma

# Specifies the language and directory for the generated Prisma client.
generate:
  - generator: javascript-client
    output: ../src/generated/prisma-client

But when I now start prisma with this datamodel.prisma setup

type Link {
  id: ID! @id
  createdAt: DateTime! @createdAt
  description: String!
  url: String!
  postedBy: User
  votes: [Vote!]!
}

type User {
  id: ID! @id
}

type Vote {
  id: ID! @id
  link: Link!
  user: User!
}

it gave me the following:

That's correct. So I just added the missing @relation(link: INLINE) and it became:

type Link {
  id: ID! @id
  createdAt: DateTime! @createdAt
  description: String!
  url: String!
  postedBy: User @relation(link: INLINE)
  votes: [Vote!]! @relation(link: INLINE)
}

type User {
  id: ID! @id
}

type Vote {
  id: ID! @id
  link: Link!
  user: User! @relation(link: INLINE)
}

Now again with a prisma deploy I get:

but on the website I get those errors again:

It seems as if the datamodel ist not MongoDB compatible. I'm not so deep into it. Maybe someone has a cool idea.

And for better analytics, here again the error message I get when I try to interact with the page:

server>npm start

> [email protected] start E:\Azure\peach_webserver\server
> node src/index.js

Server is running on http://localhost:4000
Error: Variable '$where' expected value of type 'LinkWhereInput' but got: {"OR":[{},{}]}. Reason: 'OR' Field 'OR' is not defined in the input type 'LinkWhereInput'. (line 1, column 8):
query ($where: LinkWhereInput) {
       ^
    at BatchedGraphQLClient.<anonymous> (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35)
    at step (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23)
    at Object.next (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53)
    at fulfilled (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: Variable '$where' expected value of type 'LinkWhereInput' but got: {"OR":[{},{}]}. Reason: 'OR' Field 'OR' is not defined in the input type 'LinkWhereInput'. (line 1, column 8):
query ($where: LinkWhereInput) {
       ^
    at BatchedGraphQLClient.<anonymous> (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:77:35)
    at step (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:40:23)
    at Object.next (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:21:53)
    at fulfilled (E:\Azure\peach_webserver\server\node_modules\http-link-dataloader\dist\src\BatchedGraphQLClient.js:12:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)

itofficeeu · 2020-01-04T20:20:34Z

I also have challenges with the data model in datamodel.prisma in the tutorial right now. It does not fit (The resolvers don't fit to the datamodel.prisma vice versa + etc.). So I can't help you further on that right now. I chose MySQL as data back-end. So problems in the tutorial aren't necessarily specific to MongoDB.

kwoxer · 2020-01-05T10:53:56Z

Strange for me MySQL was working properly when I tried it yesterday.

Okay so I gonna have a look on the datamodel and try fixing the issues. Thank you.

kwoxer · 2020-03-30T14:30:48Z

I found time again. But also with updated packages. I cannot get it working with my MongoDB.

So maybe @nikolasburk could you have a look on this. From my perspective the issue is somewhere on side of MongoDB version orthe prisma schema.

Also I tried to use the latest mongo version via image: mongo:4.2.5.

mongo:
    image: mongo:3.6
    restart: always
    # Uncomment the next two lines to connect to your your database from outside the Docker environment, e.g. using a database GUI like Compass
    # ports:
    # - "27017:27017"
    environment:
      MONGO_INITDB_ROOT_USERNAME: prisma
      MONGO_INITDB_ROOT_PASSWORD: prisma
    ports:
      - "27017:27017"
    volumes:
      - mongo:/var/lib/mongo

But it's just failing and failing when I use docker-compose up.

I mean I'm lost. With your demo server (endpoint: https://eu1.prisma.sh/kwoxer/test123/dev) it works perfectly. But as I want to use mongodb this is an error I have no idea about. Hopefully you find some time to have a look.

Maybe the first issue is this on when I use prisma deploy. Here it says that there are errors in the datamodel. (Hint: Same datamodel is working when using a Demo Server)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can’t establish a connection to the server at ws://localhost:4000/ in any browser #86

Can’t establish a connection to the server at ws://localhost:4000/ in any browser #86

kwoxer commented Dec 16, 2019

itofficeeu commented Dec 30, 2019

kwoxer commented Dec 30, 2019 •

edited

Loading

kwoxer commented Dec 30, 2019

itofficeeu commented Jan 3, 2020 •

edited

Loading

kwoxer commented Jan 4, 2020 •

edited

Loading

itofficeeu commented Jan 4, 2020

kwoxer commented Jan 4, 2020 •

edited

Loading

kwoxer commented Jan 4, 2020 •

edited

Loading

itofficeeu commented Jan 4, 2020 •

edited

Loading

kwoxer commented Jan 5, 2020

kwoxer commented Mar 30, 2020 •

edited

Loading

Can’t establish a connection to the server at ws://localhost:4000/ in any browser #86

Can’t establish a connection to the server at ws://localhost:4000/ in any browser #86

Comments

kwoxer commented Dec 16, 2019

itofficeeu commented Dec 30, 2019

kwoxer commented Dec 30, 2019 • edited Loading

kwoxer commented Dec 30, 2019

itofficeeu commented Jan 3, 2020 • edited Loading

kwoxer commented Jan 4, 2020 • edited Loading

itofficeeu commented Jan 4, 2020

kwoxer commented Jan 4, 2020 • edited Loading

kwoxer commented Jan 4, 2020 • edited Loading

itofficeeu commented Jan 4, 2020 • edited Loading

kwoxer commented Jan 5, 2020

kwoxer commented Mar 30, 2020 • edited Loading

kwoxer commented Dec 30, 2019 •

edited

Loading

itofficeeu commented Jan 3, 2020 •

edited

Loading

kwoxer commented Jan 4, 2020 •

edited

Loading

kwoxer commented Jan 4, 2020 •

edited

Loading

kwoxer commented Jan 4, 2020 •

edited

Loading

itofficeeu commented Jan 4, 2020 •

edited

Loading

kwoxer commented Mar 30, 2020 •

edited

Loading