Subscription not connecting using ApolloServer

See also questions close to this topic

• Cannot Get status code from xhr response text

  I have custom error messages returning from the server and i get it in the xhr.responseText.

  {"timestamp":1544419441358,"status":900,"error":"Http Status 900","message":"Origin already exists","path":"/origin/add/"}

  I need to get the status code from the above return response. I have tried following way

  • xhr.responseText.status

  But i cannot get that error 900. What i am getting is undefined.

  So how to get the status code from the response text.
• updating camera properties automatically sets camera.lookAt to default

  I'm currently changing my near plane while running the application and every time I do it my camera's looking at the vector (0,0,0) as in the start of the application although it was looking in another direction beforehand. Any ideas why this happens? And how to avoid it?
• Is it possible to get a value from a JavaScript immediately-invoked arrow function by using a "return" statement?

  In this code example:

  let result = (async (global) => {
    // other code here (includes await's; thus the async)
    return 123;
  })(this);
  

  The code works, but the return'ed value is nowhere to be found (not in result). Is there any way to use a normal return statement to get data out of this function?
• Gatsby: query gatsby-images in specific post directory

  I'd like to start using gatsby-image with gatsby-plugin-sharp and gatsby-transformer-sharp to improve my blog's performance.

  Until now I've been storing images in the same directories as my markdown posts:

  - src/
  --- pages/
  ----- my-post/
  ------- index.md
  ------- image.jpg
  ----- another-post/
  ------- index.md
  ------- anotherimage.jpg
  

  I'd like to keep this architecture as my articles contain a lot of images, and it just seems to make sense to store images in the same directory as the post they'll be displayed on.

  However, all I've read about gatsby-image suggests querying a single image directory somewhere at the site's root:

  - src/
  --- pages/
  ----- my-post/
  ------- index.md
  ----- another-post/
  ------- index.md
  --- images/
  ----- image.jpg
  ----- anotherimage.jpg
  

  Isn't querying all the blog's images negatively affecting performance?

  Woudl there be a simple way to switch to using gatsby-image, but by querying only the directory of the relevant blog post?
• Variable return data with local state in Apollo

  So, I'm using Apollo-link-state to manage my local state in a React GraphQL app, I'm trying to store column sorting values for different paths in global state, so for example if you're on /people, you may be sorting by firstName. Ideally I'd just query getSorting, pass in the path and get the column and direction.

  Because GraphQL is very rigid by design, I've had to write some rather ugly code:

  export const GET_SORTING_PREF = gql`
      query GET_SORTING_PREF {
        sortingPrefs @client {
          assets {
            column
            direction
          }
          liabilities {
            column
            direction
          }
          reporting {
            column
            direction
          }
          people {
            column
            direction
          }
          companies {
            column
            direction
          }
        }
      }
  ` 
  

  Whereas in Redux I'd just pass up path, have a switch in my reducer, and return just the column and direction.

  The actual mutation is written like so (included a null return so it doesn't complain):

    export const setSortingPref = (_, {path, column, direction}, { cache }) => {
      let { sortingPrefs } = cache.readQuery({
        query: GET_SORTING_PREF
      })
  
      sortingPrefs[path] = {
        column, direction
      }
  
      cache.writeQuery({
        query: GET_SORTING_PREF,
        data: { sortingPrefs }
      })
  
      return null;
    }
  

  Is there a neat way I can just pass up the path and return the appropriate values, without all this dumb repeating, or is that sort of just how GraphQL is supposed to work?
• Variable "$pageNum" of required type "Int!" was not provided

  Hi all, I am having an error on GraphQL and Apollo says that "Variable "$pageNum" of required type "Int!" was not provided" That is my query type.

  

  
• Subscribe never called - using React + Apollo subscription

  I am trying to get subscriptions working on my Express server. This is the part of code that matters:

  import { PubSub, withFilter } from 'graphql-subscriptions';
  const pubsub = new PubSub();
  
  type Subscription {
    newDate(otherUserId: Int!): date
  }
  ...
  // this is getting called inside a 'sendDateInvite' mutation
  pubsub.publish("newDate", {
        newDate: {
              // other stuff
              otherUserId: otherUser.id,
              otherUserName: otherUser.name,
         },
         otherUserId: args.otherUserId
  });
  
  ...
  // resolver:
  Subscription: {
        newDate: {
          subscribe: () => {
            console.log("help they can't see me")
             pubsub.asyncIterator('newDate')
          }
        }
  },
  

  I played around with the syntax and other packages but didn't get it to work. Is it a good idea to try and play with pubsub.subscribe instead of pubsub.publish?
• Extend SchemaDirectiveVisitor To Use Apollo Server Schema Directives in NodeJS

  I'm trying to extend SchemaDirectiveVisitor in order to make a custom directive in Apollo Server 2. I'm specifically using the 2.2.6 hapi node module.

  Here's my server.js code:

  const { ApolloServer } = require('apollo-server-hapi');
  const { SchemaDirectiveVisitor } = ApolloServer;
  
  class ViewTemplateGroup extends SchemaDirectiveVisitor {
    visitFieldDefinition(field) {
      console.log('Im calling this directive!');
      return;
    }
  }
  

  When I start up my server I immediately get the following error:

  TypeError: Class extends value undefined is not a constructor or null
      at Object.<anonymous> (/Users/garrett.kim/Desktop/Projects/Test Web/poc-graphQL-forms-gyk/server.js:36:33)
      at Module._compile (module.js:660:30)
      at Object.Module._extensions..js (module.js:671:10)
      at Module.load (module.js:573:32)
      at tryModuleLoad (module.js:513:12)
      at Function.Module._load (module.js:505:3)
      at Function.Module.runMain (module.js:701:10)
      at startup (bootstrap_node.js:193:16)
      at bootstrap_node.js:617:3
  

  To my knowledge, I'm following the Apollo Server 2 example very closely.

  https://www.apollographql.com/docs/apollo-server/features/creating-directives.html

  Any help getting directives working would be appreciated.
• What is a .graphql file used in Apollo CodeGen?

  I'm trying to research Apollo codegen

  https://www.apollographql.com/docs/angular/features/developer-tooling.html#codegen

  And I'm having trouble finding the documentation around the .graphql or graphqlconfig file referenced in the documentation. What is this file?

  1. Is it a standard configuration file in Apollo Server 2?
  2. Is it simply a schema definition in a particular format?
  3. Is this file used for anything else?
  4. Is it schema only, or can you create named graphql queries in it that would show up in the generated SDK?
• graphql-subscription not working consistently

  We are using graphql-subscription in our application in this manner:

  When deletion event is arriving into server:

  pubsub.publish('onDeleteItem', {onDeleteItem: [msg.payload.ItemId]});

  Resolvers:

  Subscription: { onDeleteItem: { subscribe: () => pubsub.asyncIterator('onDeleteItem'), }, },

  Subscribing to it from our client side:

  const onDeleteItemSubscription = gql
  
            subscription onDeleteItem {
                  onDeleteItem
    }
  
  getItemsList () {
    queryRef.subscribeToMore({
        document: onDeleteItemSubscription ,
        updateQuery(prev: { itemList: AssetList }, {subscriptionData: {data}}) {
          if (!data) {
            return prev;
          } else {
            const deletedItems = (data as any).onDeleteItem;
            return {
                     itemList {...    *### //return filtered list*
                         }
              } 
            } 
         }
      };

  The problem is that sometimes the subscription is working fine and the deleted item is filtered as expected, but very often it just not working at all. There are no error logs. When I debug it, I can see that the problem is that the client is not notified by pubsub.publish().

  The problem is occurring with all our subscriptions and this is only one example of them.

  What could be the problem? Thanks.
• Apollo Subscriptions not listening to new data on client

  Previously my apollo setup was listening to subscriptions until I added in socket.io and now my client setup is no longer listening to new data. my server codes seem to be ok based on my testing using graphql playground.

  in my browser console, i get the following error message

  client.js:652 WebSocket connection to 'ws://localhost:4000/' failed: Error during WebSocket handshake: Unexpected response code: 400

  There seems to be some issue with my client side setup to use apollo subscriptions.

  Appreciate any pointers? Thanks in advance

  import { ApolloClient } from "apollo-client";
  import { onError } from "apollo-link-error";
  import { ApolloLink, split } from "apollo-link";
  import { createUploadLink } from "apollo-upload-client";
  import gql from "graphql-tag";
  import { withClientState } from "apollo-link-state";
  import { InMemoryCache } from "apollo-cache-inmemory";
  import { WebSocketLink } from "apollo-link-ws";
  import { getMainDefinition } from "apollo-utilities";
  import { setContext } from "apollo-link-context";
  
      const cache = new InMemoryCache();
  
      const defaultState = {
        currentGame: {
          __typename: "currentGame",
          teamAScore: 0,
          teamBScore: 0,
          teamAName: "EAGLES",
          teamBName: "LOL"
        }
      };
  
      const stateLink = withClientState({
        cache,
        defaults: defaultState,
        resolvers: {
          Mutation: {
            updateGame: (_, { index, value }, { cache }) => {
              const query = gql`
                query GetCurrentGame {
                  currentGame @client {
                    teamAScore
                    teamBScore
                    teamAName
                    teamBName
                  }
                }
              `;
              const previous = cache.readQuery({ query });
              const data = {
                currentGame: {
                  ...previous.currentGame,
                  [index]: value
                }
              };
              cache.writeQuery({ query, data });
              return null;
            },
            resetCurrentGame: (_, d, { cache }) => {
              cache.writeData({ data: defaultState });
            }
          }
        }
      });
  
      const host = "http://localhost:4000";
  
      // httpLink
      const httpLink = createUploadLink({
        uri: `${host}/graphql`,
        credentials: "same-origin"
      });
  
      // wsLink
      const wsLink = new WebSocketLink({
        uri: `ws://localhost:4000/`,
        options: {
          reconnect: true
        }
      });
  
      // using the ability to split links, you can send data to each link
      // depending on what kind of operation is being sent
      const webLink = split(
        // split based on operation type
        ({ query }) => {
          const { kind, operation } = getMainDefinition(query);
          return kind === "OperationDefinition" && operation === "subscription";
        },
        wsLink,
        httpLink
      );
  
      // authMiddleware
      const authLink = setContext(async (req, { headers }) => {
        //  const token = await AsyncStorage.getItem("@token");
        const token = "";
  
        return {
          headers: {
            ...headers,
            authorization: token ? `${token}` : ""
          }
        };
      });
  
      const errorLink = onError(({ networkError, graphQLErrors }) => {
        if (graphQLErrors) {
          graphQLErrors.map(({ message, locations, path }) =>
            console.log(
              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
            )
          );
        }
        if (networkError) console.log(`[Network error]: ${networkError}`);
      });
  
      export const client = new ApolloClient({
        link: ApolloLink.from([authLink, stateLink, errorLink, webLink]),
        cache
      });
  

  My server side code if required

  //! Using Apollo Server Express
  const app = express();
  const path = "/graphql";
  const schema = genSchema();
  
  export const startServer = async () => {
    const server = new ApolloServer({
      schema,
      context: ({ req }: any) => ({
        req,
        pubsub,
        userLoader: userLoader()
      })
    });
  
    app.use(cors());
  
    app.use(authMiddleware);
  
    app.use("/images", express.static("images"));
  
    app.use(
      "graphql",
      graphqlUploadExpress({
        uploadDir: "/",
        maxFileSize: 100000000,
        maxFiles: 10
      }),
      graphqlHTTP({ schema }) as any
    );
  
    server.applyMiddleware({ app, path });
  
    //! Added Subscription Handler
    const httpServer = createServer(app);
    server.installSubscriptionHandlers(httpServer);
  
    const port = process.env.PORT || 4000;
  
    await createConnection();
  
    await httpServer.listen({
      port
    });
  
    console.log(`Server is running on localhost:${port}${server.graphqlPath}`);
  };