Not exactly sure how to properly integrate

[rafbgarcia]

Hello again :)

I'm trying to integrate with phoenix and I feel like I did everything that the docs say, but am getting a 400 Bad Request.

This is the relevant code (I believe...)

This is my JS code, I'm just trying to make it work at this point:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as AbsintheSocket from "@absinthe/socket";
import {Socket as PhoenixSocket} from "phoenix";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    const operation = `subscription newOrder($userId: String!) {
      order(userId: $userId) { id }
    }`

    const absintheSocket = AbsintheSocket.create(
      new PhoenixSocket("ws://localhost:4001/api/graphql")
    );

    const notifier = AbsintheSocket.send(absintheSocket, {
      operation,
      variables: {userId: 10}
    });

    const logEvent = eventName => (...args) => console.log(eventName, ...args);

    const updatedNotifier = AbsintheSocket.observe(absintheSocket, notifier, {
      onAbort: logEvent("abort"),
      onError: logEvent("error"),
      onStart: logEvent("open"),
      onResult: logEvent("result")
    });
  }

}

And this is my server's:

defmodule Api.Application do
  use Application

  def start(_type, _args) do
    import Supervisor.Spec

    # Define workers and child supervisors to be supervised
    children = [
      supervisor(Api.Endpoint, []),
      supervisor(Absinthe.Subscription, [Api.Endpoint]),
...

defmodule Api.Endpoint do
  use Phoenix.Endpoint, otp_app: :api
  use Absinthe.Phoenix.Endpoint

  socket "/socket", Api.OrderSocket
...

defmodule Api.OrderSocket do
  use Phoenix.Socket
  use Absinthe.Phoenix.Socket, schema: Api.GraphqlSchema

  transport :websocket, Phoenix.Transports.WebSocket

  def connect(_params, socket) do
    {:ok, socket}
  end

defmodule Api.Router do
  use Api, :router

  scope "/api" do
    forward "/graphql", Absinthe.Plug.GraphiQL,
      schema: Api.GraphqlSchema,
      socket: Api.OrderSocket,
      interface: :simple
  end

defmodule Api.GraphqlSchema do
  use Absinthe.Schema
  import_types Api.Graphql.Types

  subscription do
    field :new_order, :order do
      arg :user_id, non_null(:string)

      config fn args, _ ->
        {:ok, topic: args.user_id}
      end

      trigger :confirm_order, topic: fn order ->
        order.id
      end

      resolve fn %{new_order: order}, _, _ ->
        {:ok, order}
      end
    end
  end
end

In my logs this is all I see:

[info] GET /api/motoboy/graphql/websocket
[info] Sent 400 in 93µs

Am I missing something? Thanks!

[benwilson512]

See absinthe-graphql/absinthe_phoenix#22

[rafbgarcia]

Thanks @benwilson512, closing this issue.

FWIW this was my problem

[tlvenn]

Btw, if you are using Angular, I suggest looking to the apollo-angular which now supports apollo client 2.0 and apollo link that we support out of the box.

[rafbgarcia]

@tlvenn thanks for the suggestion, I will go ahead and use it :)