<p>अपोलो-लिंक-डब्ल्यूएस: प्रारंभिक सेटअप के बाद कनेक्शन पैराम्स (और टोकन) कैसे बदलें?</p>

आप एक फ़ंक्शन का उपयोग कर सकते हैं जो कनेक्शनपरम्स में किसी ऑब्जेक्ट को हल करता है।

    const wsLink = new WebSocketLink({
      uri: config.subscriptionURL,
      options: {
        reconnect: true,
        connectionParams: () => ({
          authToken: reduxStore.getState().authentication.token,
        }),
      },
    });

संपादित करें:

ओह रुको, यह पहली बार के बाद नहीं कहा जाता है... हो सकता है कि किसी अन्य मिडलवेयर के साथ संगत हो जो प्रतिक्रिया पर प्रमाणीकरण ऑब्जेक्ट डालता है जिसे आप onOperation सर्वर साइड से पार्स कर सकते हैं?

यहाँ मेरे पास आपके लिए क्या है, जिस तरह से मैं इसे ApolloClient V1 के साथ कर रहा था, उसके बाद तैयार किया गया

पेलोड पर प्रमाणीकरण टोकन संलग्न करने के लिए एक नया लिंक मिडलवेयर जोड़ें

const authMiddleware = new ApolloLink((operation, forward) => {
    // Add the authorization to the headers for HTTP authentication
    operation.setContext({
      headers: {
        authorization: `Bearer ${authToken()}`,
      },
    });

    // Add onto payload for WebSocket authentication
    (operation as Operation & { authToken: string | undefined }).authToken = authToken();


    return (forward as any)(operation);
  });

const myLink = concat(myLink, wsLink);

फिर सर्वर साइड आप इसे देख सकते हैं और ऑनऑपरेशन हुक का उपयोग करके संदर्भ पर लागू कर सकते हैं

function configureDecodeTokenSocketMiddleware(authURL: string) {
  return async function decodeTokenSocketMiddleware<ConnectionParams extends { authToken: string }>(connectionParams: ConnectionParams, operationParams: object) {
    let authPayload;
    try {
      if (typeof connectionParams.authToken === 'string') {
        authPayload = await verifyJWT(authURL, connectionParams.authToken);
      } else {
        throw new Error('Auth Token not available');
      }
    } catch(e) {
      authPayload = {};
    }
    return {
      ...operationParams,
      context: {
        authentication: authPayload,
      },
    };
  };
}

new SubscriptionServer({
      execute,
      subscribe,
      schema,
      onOperation: configureDecodeTokenSocketMiddleware(appConfig.authURL),
    }, {
      server: appConfig.server,
      path: `/${appConfig.subscriptionsEndpoint}`,
    });

हो सकता है, आप इस संदेश को फिर से भेजने का प्रयास कर सकते हैं: https://github.com/apollographql/subscriptions-transport-ws/blob/master/src/client.ts#L507

      const payload: ConnectionParams = typeof this.connectionParams === 'function' ? this.connectionParams() : this.connectionParams;
      this.sendMessage(undefined, MessageTypes.GQL_CONNECTION_INIT, payload);

क्या ऐसा करने का कोई अनुशंसित तरीका है?

सदस्यता इस मुद्दे

चूंकि नया WebSocketLink अभी भी subscriptions-transport-ws का एक उदाहरण बना रहा है, इसलिए मैं अपने मिडलवेयर को WebSocketLink के बजाय सब्सक्रिप्शन ट्रांसपोर्ट क्लाइंट पर मैन्युअल रूप से लागू कर रहा हूं।

मैं उसी प्रक्रिया का उपयोग कर रहा हूं जैसा मैंने v1 में किया था, हालांकि यह WebSocketLink API के हिस्से के रूप में नहीं होने के कारण हैकी की तरह लगता है।

// create the web socket link
const wsLink = new WebSocketLink({
  uri: 'ws://example.com',
  options: {
    reconnect: true
  }
})
// create my middleware using the applyMiddleware method from subscriptions-transport-ws
const subscriptionMiddleware = {
  applyMiddleware (options, next) {
    options.auth = { ... }
    next()
  }
}
// add the middleware to the web socket link via the Subscription Transport client
wsLink.subscriptionClient.use([subscriptionMiddleware])

आप विकल्प ऑब्जेक्ट में जो भी मान जोड़ते हैं, वे सर्वर साइड पर onOperation कॉलबैक में उपलब्ध होते हैं।

यह समस्या भी हो रही है
@jbaxleyiii कोई विचार?

मैंने कुछ हफ्ते पहले एक समाधान बनाया है (? यह मेरे मामले में जाग रहा है):

मेरे app.module.ts में एक मॉड्यूल GraphQLModule आयात किया गया है:

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { Apollo, ApolloModule } from 'apollo-angular';
import { HttpLinkModule } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';

@NgModule({
  exports: [
    ApolloModule,
    HttpClientModule,
    HttpLinkModule
  ]
})
export class GraphQLModule {
  public subscriptionClient: SubscriptionClient = null;

  constructor(apollo: Apollo) {
    const wssEndpoint = 'wss://your-domain.com/subscriptions';
    // It's required to define connectionParams as function, as otherwise the updated token is not transferred
    const connectionParams = () => {
      const token = sessionStorage.getItem('token');
      return token ? { 'Authorization': 'token ' + token } : {};
    };

    const wsLink = new WebSocketLink({
      uri: wssEndpoint,
      options: {
        connectionParams: connectionParams,
        reconnect: true
      }
    });
    this.subscriptionClient = (<any>wsLink).subscriptionClient;

    const cache = new InMemoryCache({});

    apollo.create({
      link: wsLink,
      cache: cache.restore(window[ '__APOLLO_CLIENT__' ]),
      connectToDevTools: true,
      queryDeduplication: true
    });
  }
}

मेरी प्रमाणीकरण सेवा में, मैं इस मॉड्यूल को कंस्ट्रक्टर में private graphQLModule: GraphQLModule के माध्यम से इंजेक्ट कर रहा हूं।
लॉगिन या लॉगआउट के बाद मैं कर रहा हूँ:

const client = this.graphQLModule.subscriptionClient;
// Close actual connection
client.close(true, true);
// todo: set/unset session token in sessionStorage
// Connect again
(<any>client).connect();

यह सब्सक्रिप्शन क्लाइंट को ऐप स्टार्ट पर खोलता है और लॉगिन/लॉगआउट पर इसे पूरी तरह से फिर से शुरू करता है।

आदर्श रूप से यह एक वादा वापसी समारोह का भी समर्थन करेगा, इसलिए यदि हमें टोकन को एसिंक करना है तो हम कर सकते हैं।

@ clayne11 मुझे यकीन नहीं है कि यह करता है। मैं कनेक्शन पैराम्स के रूप में प्रतिक्रिया-मूल से AsyncStorage का उपयोग करने का प्रयास कर रहा हूं। लेकिन मैंने जो एसिंक जोड़ा है, वह सर्वर पर अपरिभाषित भेजता रहता है।
मुझे इससे कोई समस्या है?

अपडेट करें:
एक पुल अनुरोध है जो इसे संबोधित करता है लेकिन अभी तक मास्टर शाखा में विलय नहीं हुआ है

@jonathanheilmann , आपका समाधान @ helios1138 मूल समाधान के समान है। हालांकि, सदस्यता क्लाइंट के लिए connect() API को निजी के रूप में चिह्नित किया गया है और आदर्श रूप से इसका उपयोग नहीं किया जाना चाहिए।

मैंने subscriptionClient.close(false, false) करने की कोशिश की जो एक सार्वजनिक एपीआई है और इसे फिर से कनेक्ट करने के लिए मजबूर होना चाहिए था, और यह करता है, लेकिन सदस्यता अभी भी काम नहीं करती है। केवल एक चीज जो अभी काम कर रही है वह है:

subscriptionClient.close();
subscriptionClient.connect(); // this is a private API :-(

इस पर कोई साफ नए विचार? यहां समाधान करना पसंद है। मैं लोड पर अपना अपोलो लिंक बनाता हूं लेकिन एक बार जब मेरा उपयोगकर्ता आईडी में लॉग इन करता है तो वास्तव में संदर्भ में भेजे जा रहे टोकन को अपडेट करना पसंद करते हैं।

यह सबसे अच्छा समाधान है जिसके साथ हम आने में सक्षम हैं: https://github.com/apollographql/apolo-server/issues/1505।

प्रत्येक ऑपरेशन पर context बनाया जाता है और हम उपयोगकर्ता को गतिशील रूप से देखते हैं।

इससे मुझे मदद मिली
https://github.com/apolographql/apolo-link/issues/446#issuecomment -410073779

क्या कोई पुष्टि कर सकता है कि एक बार वेबसॉकेट चैनल (प्राधिकरण हेडर = टोकन एएए के साथ) खोला गया है, तो वेबसॉकेट लिंक का उपयोग करने वाले प्रत्येक बाद के अनुरोध को हमेशा एएए टोकन के रूप में पहचाना जाएगा।

या क्या प्रत्येक अनुरोध पर एक अलग प्राधिकरण शीर्षलेख भेजने का कोई तरीका है (दूसरे डब्लूएस चैनल को फिर से खोलने के अलावा)?

मैं समझना चाहता हूं कि डब्ल्यूएस के लिए निम्न स्तर के प्रोटोकॉल पर क्या हो रहा है।

आपके उत्तर के लिए धन्यवाद!

यहाँ मेरा कोड अब तक है (एक टोकन के साथ सही ढंग से काम कर रहा है):

const wsClient = new SubscriptionClient(
  graphqlEndpoint,
  {
    reconnect: true,
    connectionParams: () => ({
      headers: {
        'Authorization': 'mytokenAAA',
      },
    }),
  },
  ws,
);
const link = new WebSocketLink(wsClient);

makePromise(execute(link, options)); // that's using token AAA
// how to make another query (execute) using token BBB without creating another link ?

@sulliwane @RyannGalea @jonathanheilmann @ helios1138 टोकन/कनेक्शन पैराम को गतिशील रूप से अपडेट करने के लिए आपको इसे SubscriptionClient के मिडलवेयर का उपयोग करके सेट करना चाहिए। मेरा सार यहाँ देखें: https://gist.github.com/cowlicks/71e766164647f224bf15f086ea34fa52

const subscriptionMiddleware = {
  applyMiddleware: function(options, next) {
    // Get the current context
    const context = options.getContext();
    // set it on the `options` which will be passed to the websocket with Apollo 
    // Server it becomes: `ApolloServer({contetx: ({payload}) => (returns options)
    options.authorization = context.authorization;
    next()
  },
};

const server = new ApolloServer({
  context: ({connection, payload, req}) => {
    // whatever you return here can be accessed from the middleware of the SubscriptionMiddleware with
    // applyMiddleware: (options, next) => options.getContext()
    return {authorization: payload.authorization};
  },
});

const link = new WebSocketLink({
    uri: WS_URL,
    webSocketImpl: WebSocket,
    options: {
        reconnect: true,
    }
});

link.subscriptionClient.use([subscriptionMiddleware]);

मुझे मिला एकमात्र समाधान क्लाइंट को मैन्युअल रूप से बंद करना है ...

मैंने 1.5 साल पहले एक समाधान पोस्ट किया था: अपोलोग्राफक्ल/अपोलो-सर्वर#1505। AFAIK यह अभी भी काम करता है।

@ clayne11 आपका समाधान एक मिडलवेयर का उपयोग करने का तात्पर्य है। मुझे लगता है कि यह बहुत अच्छा है लेकिन मैं कोणीय और योग-ग्राफकल के साथ काम करता हूं और अज्ञात कारण से मैं संदर्भ के माध्यम से टोकन नहीं भेज सकता।

सर्वर में मिडलवेयर में टोकन तक पहुंचने का कोई तरीका है?
मैं योग का उपयोग कर रहा हूं और इस तरह मैं संदर्भ में टोकन का उपयोग करता हूं

const server = new GraphQLServer({
  typeDefs: './src/schema.graphql',
  middlewares: [permissions],
  resolvers,
  context: ({  connection, ...request }) => {
    if(connection) {
          wsToken: connection.context.authToken
      }
    }
    return ({...request, prisma });
  }
});


const options = {
  port: process.env.PORT || 4000,
  tracing: true,
  subscriptions: {
    path: "/",
    onConnect: async (connectionParams, webSocket) => {
     if (connectionParams.authToken) {
     // I can access this through context
       return {
         authToken: connectionParams.authToken
       };
     }
    }
  }
};


server.express.use(async (req, res, next) => {
  /*
     I want to access authToken here
  */
  next();
});


server.start(options, ({port}) => {
  console.log(`Server is runnning on http://localhost:${port}`);
});

सॉकेट बंद किए बिना मुझे अपोलो नेटवर्क त्रुटियों का एक गुच्छा मिलता है (भले ही यह स्वयं को सही करता है, हम उन त्रुटियों को आदर्श से कम टोस्ट अधिसूचनाओं के समूह में दिखाते हैं) इसलिए मुझे टोकन अपडेट करने के बाद वेबसोकेट बंद करना होगा, फिर reconnect: true सुनिश्चित करें कि यह फिर से जुड़ता है ... सिवाय इसके कि यह एक अनंत लूप में फिर से जुड़ता है, यहां तक ​​​​कि सोचा कि सॉकेट केवल एक बार बंद हो जाता है

संपादित करें: SubscriptionClient.close() के बजाय SubscriptionClient.close() SubscriptionClient.client.close() पर कॉल करके फिक्स्ड

क्या एक पूर्ण क्लाइंट और सर्वर उदाहरण है कि 5 और 23 पसंद के साथ 100 बिखरे हुए अर्ध-समाधानों के बजाय नए टोकन के साथ फिर से कैसे कनेक्ट किया जाए?

मैं इस तरह की सदस्यताएं स्थापित करता हूं apolloServer.installSubscriptionHandlers(server);
और मैं अपोलोसर्वर बनाता हूँ
const apolloServer = new ApolloServer({ schema, introspection: true, subscriptions: { onConnect: (connectionParams, webSocket, context) => { }, onDisconnect: (webSocket, context) => {}, ...there is no OnOperation: () => {}!!! },

क्या ऑपरेशन पर जोड़ने का कोई और तरीका है? या मुझे मैन्युअल रूप से SubscriptionServer बनाना है और apolloServer.installSubscriptionHandlers(server) का उपयोग नहीं करना है?

मैंने क्लाइंट को गतिशील रूप से उत्पन्न करना समाप्त कर दिया। यदि उपयोगकर्ता लॉग इन नहीं है, तो क्लाइंट new WebSocket लिंक नहीं बनाता है, अन्यथा यह करता है। नीचे दिया गया generateApolloClient फ़ंक्शन SubscriptionClient को भी उजागर करता है, इसलिए मैं कनेक्ट होने पर प्रेषण कॉल जोड़ सकता हूं (उदाहरण के लिए, रेडक्स स्टोर को बताएं कि वेबस्केट कनेक्ट है)।

/**
 * Http link
 */
const httpLink = new HttpLink({
  uri: '/graphql'
});

/**
 * Perform actions before each http request
 */
const middlewareLink = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      authorization: localStorage.getItem('token')
    }
  });
  return forward(operation);
});

const cache = new InMemoryCache();

type ApolloSubscriptionClient<TLoggedIn extends boolean> = TLoggedIn extends true ? SubscriptionClient : undefined;

/**
 * Function to create our apollo client. After login we want to add subscriptions
 * with websocket, so we'll need to recreate the entire client depending on the
 * user being logged in or logged out.
 */
export const generateApolloClient = <TLoggedIn extends boolean>(
  loggedIn: TLoggedIn
): [ApolloClient<NormalizedCacheObject>, ApolloSubscriptionClient<TLoggedIn>] => {
  let link = middlewareLink.concat(httpLink);

  // Only apply our subscription client when the user is logged in
  let subscriptionClient: SubscriptionClient | undefined;
  if (loggedIn) {
    subscriptionClient = new SubscriptionClient('ws://localhost:4001/graphql/ws', {
      reconnect: true,
      connectionParams: () => ({ authorization: localStorage.getItem('token') })
    });

    const wsLink = new WebSocketLink(subscriptionClient);

    link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        );
      },
      wsLink,
      link
    );
  }

  const apolloClient = new ApolloClient({ link, cache });

  return [apolloClient, subscriptionClient as ApolloSubscriptionClient<TLoggedIn>];
};

यहां ApolloProvider घटक में कोड है जो generateApolloClient फ़ंक्शन का उपयोग करता है:

const GraphqlProvider: React.FC = ({ children }) => {
  const dispatch = useAppDispatch();
  const loggedIn = useUserLoggedIn();
  const [client, setClient] = useState(generateApolloClient(false)[0]);

  useEffect(() => {
    if (loggedIn) {
      const [apolloClient, subscriptionClient] = generateApolloClient(loggedIn);
      subscriptionClient.onConnected(() => {
        dispatch(setSubscriptionConnected(true));
      })
      setClient(apolloClient);
    }
  }, [dispatch, loggedIn]);

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

यह अच्छी तरह से काम कर रहा है और जब भी कोई उपयोगकर्ता लॉग आउट करता है और फिर से वापस आता है, तो मुझे सर्वर पर एक नया टोकन दिखाई देता है, लेकिन ऐसा लगता है कि यह थोड़ा अतिरिक्त काम है। विचार?

@ dorsett85 उत्तर के आधार पर रिएक्ट/नेक्स्टजेएस ऐप्स के लिए क्लाइंट को रीफ्रेश करने के लिए प्रतिक्रिया संदर्भ एपीआई का उपयोग करना एक अच्छा विचार हो सकता है।

----------- प्रसंग एपीआई

export const ApolloClientContext = createContext(undefined);
export const ApolloClientContextProvider: React.FC<{}> = ({ children }) => {
  const [apolloClient, setApolloClient] = useState(client);

  return (
    <ApolloClientContext.Provider value={[apolloClient, setApolloClient]}>{children}</ApolloClientContext.Provider>
  );
};

--------- अपोलो प्रदाता

   <ApolloClientContextProvider>
      <ApolloClientContext.Consumer>
        {([apolloClient, setApolloClient]) => {
          return (
            <ApolloProvider client={apolloClient}>
              <Component {...pageProps} />
            </ApolloProvider>
          );
        }}
      </ApolloClientContext.Consumer>
    </ApolloClientContextProvider>

-------- प्रमाणीकरण के साथ नए क्लाइंट उत्पन्न करने वाले फ़ंक्शन का उपयोग करें

export const generateApolloClientWithAuth = (token): ApolloClient<any> => {
 const httpLink = createHttpLink({
  uri: 'http://localhost:5000/graphql',
  fetch,
  credentials: 'include'
});
  const wsLink = process.browser
    ? new WebSocketLink({
        uri: `ws://localhost:5000/graphql`,
        options: {
          reconnect: true,
          connectionParams() {
            console.log('-token', token);
            return {
              authorization: token ? `Bearer ${token}` : ''
            };
          }
        }
      })
    : null;
  const splitLink = process.browser
    ? split(
        ({ query }) => {
          const definition = getMainDefinition(query);
          return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
        },
        wsLink,
        httpLink
      )
    : httpLink;
  return new ApolloClient({
    ssrMode: true,
    link: splitLink,
    connectToDevTools: process.env.NODE_ENV === 'development',
    cache: new InMemoryCache().restore({})
  });
};

----------लॉगिन घटक

const [apolloClient, setApolloClient] = useContext(ApolloClientContext);

----------- लॉगिन करने पर
setApolloClient(generateApolloClientWithAuth(token));

महत्वपूर्ण नोट: बशर्ते अपोलो क्लाइंट कोड SSR का उपयोग करता हो

@kamilkisiela क्या हम सिर्फ wsLink.subscriptionClient सदस्य को सार्वजनिक सदस्य बना सकते हैं? यह संभावना नहीं है कि इसे बदलने की आवश्यकता होगी, है ना?

अंतिम मूल्य प्राप्त करने के लिए get का उपयोग करें

const wsLink = new WebSocketLink({
  uri: CLIENT_CONFIG.websocketUrl,
  options: {
    lazy: true,
    reconnect: true,
    connectionParams: {
      get authorization() {
        return user.getAuthorization();
      },
    },
    connectionCallback: (error) => {
      //@ts-ignore
      if (error?.message === "Authentication Failure!") {
        //@ts-ignore
        //wsLink.subscriptionClient.close(false, false);
      }
    },
  },
});

क्या कोई मुझ पर विश्वास करेगा अगर मैं कहूं कि यह काम करता है:

const wsLink = process.browser
    ? new WebSocketLink({
        uri: webSocketUri,
        options: {
          reconnect: true,
          connectionParams: () => ({
            token: cookie.get('token'),
          }),
        },
      })
    : null;

अर्थात
बस बदल दो:

connectionParams: {
            token: cookie.get('token'),
},

प्रति:

connectionParams: () => ({
            token: cookie.get('token'),
}),