如何在客户端 NextJS 中使用 Apollo GraphQL 订阅? [英] How to use Apollo GraphQL subscriptions in the client-side NextJS?
问题描述
我是 NextJS 的新手.我有一个页面需要显示从 Hasura GraphQL 后端提取的实时数据.
I am new to NextJS. I have a page that needs to display real-time data pulled from a Hasura GraphQL backend.
在其他非 NextJS 应用程序中,我使用了 GraphQL 订阅和 Apollo 客户端库.在幕后,这使用了 websockets.
In other non-NextJS apps, I have used GraphQL subscriptions with the Apollo client library. Under the hood, this uses websockets.
当 NextJS 不使用订阅时,我可以让 GraphQL 在 NextJS 中工作.我很确定这是在服务器端运行的:
I can get GraphQL working in NextJS when it's not using subscriptions. I'm pretty sure this is running on the server-side:
import React from "react";
import { AppProps } from "next/app";
import withApollo from 'next-with-apollo';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { getToken } from "../util/auth";
interface Props extends AppProps {
apollo: any
}
const App: React.FC<Props> = ({ Component, pageProps, apollo }) => (
<ApolloProvider client={apollo}>
<Component {...pageProps}/>
</ApolloProvider>
);
export default withApollo(({ initialState }) => new ApolloClient({
uri: "https://my_hasura_instance.com/v1/graphql",
cache: new InMemoryCache().restore(initialState || {}),
request: (operation: any) => {
const token = getToken();
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : ''
}
});
}
}))(App);
我是这样使用的:
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
const myQuery = gql`
query {
...
}
`;
const MyComponent: React.FC = () => {
const { data } = useQuery(myQuery);
return <p>{JSON.stringify(data)}</p>
}
但是,我想这样做:
import { useSubscription } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
const myQuery = gql`
subscription {
...
}
`;
const MyComponent: React.FC = () => {
const { data } = useSubscription(myQuery);
return <p>{JSON.stringify(data)}</p>
}
我的尝试
我尝试在 ApolloClient 中拆分 HttpLink 和 WebsocketLink 元素,如下所示:
I've tried splitting the HttpLink and WebsocketLink elements in the ApolloClient, like so:
import React from "react";
import { AppProps } from "next/app";
import { ApolloProvider } from '@apollo/react-hooks';
import withApollo from 'next-with-apollo';
import { InMemoryCache } from "apollo-cache-inmemory";
import ApolloClient from "apollo-client";
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { getToken } from "../util/auth";
interface Props extends AppProps {
apollo: any
}
const App: React.FC<Props> = ({ Component, pageProps, apollo }) => (
<ApolloProvider client={apollo}>
<Component {...pageProps}/>
</ApolloProvider>
);
const wsLink = new WebSocketLink({
uri: "wss://my_hasura_instance.com/v1/graphql",
options: {
reconnect: true,
timeout: 10000,
connectionParams: () => ({
headers: {
authorization: getToken() ? `Bearer ${getToken()}` : ""
}
})
},
});
const httpLink = new HttpLink({
uri: "https://hasura-g3uc.onrender.com/v1/graphql",
});
const link = process.browser ? split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink
) : httpLink;
export default withApollo(({ initialState }) => new ApolloClient({
link: link,
cache: new InMemoryCache().restore(initialState || {}),
}))(App);
但是当我加载页面时,我得到一个Internal Server Error
,并且在终端中出现这个错误:
But when I load the page, I get an Internal Server Error
, and this error in the terminal:
Error: Unable to find native implementation, or alternative implementation for WebSocket!
在我看来,ApolloClient
是在服务器端生成的,那里没有 WebSocket 实现.我怎样才能在客户端实现这一点?
It seems to me that the ApolloClient
is then being generated on the server-side, where there is no WebSocket implementation. How can I make this happen on the client-side?
推荐答案
找到了解决方法,让它工作,看看这个答案 https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-359261024
Found workaround to make it work, take look at this answer https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-359261024
这篇关于如何在客户端 NextJS 中使用 Apollo GraphQL 订阅?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!