score:0
Accepted answer
basically as i thought, impl was not needed because native html5 websocket can be used, problem was trash nextjs with it's server side thing.
i pretty much don't use that exchange when typeof window !== 'undefined'
this is the working code:
import { createclient, dedupexchange, cacheexchange, subscriptionexchange, client, exchange } from 'urql';
import { multipartfetchexchange } from '@urql/exchange-multipart-fetch';
import { createclient as createwsclient } from 'graphql-ws';
export const createurqlclient = (): client => {
const graphqlendpoint = process.env!.next_public_graphql_endpoint as string;
const graphqlwebsocketendpoint = process.env!.next_public_graphql_ws_endpoint as string;
let exchanges: exchange[] | undefined = [dedupexchange, cacheexchange, multipartfetchexchange];
if (typeof window !== 'undefined') {
const wsclient = createwsclient({
url: graphqlwebsocketendpoint,
});
const subexchange = subscriptionexchange({
forwardsubscription: operation => ({
subscribe: sink => ({
unsubscribe: wsclient.subscribe(operation, sink),
}),
}),
});
exchanges.push(subexchange);
}
const client = createclient({
url: graphqlendpoint,
requestpolicy: 'cache-and-network',
exchanges,
fetchoptions: () => ({
credentials: 'include',
}),
});
return client;
};
Source: stackoverflow.com
Related Query
- Nextjs urql subscription exchange import problem
- VSCode keeps asking to import React on NextJS and React 17 apps
- fullcalendar - NextJS - Dynamic import doesn't show calendar
- How to import external css file in nextjs app
- How to import API route in NextJS for getStaticProps?
- eslint + jsconfig + nextjs module path aliases (absolue path import - @)
- Nextjs import external components from parent directory
- How to pass values to components using dynamic import of NextJS
- Import css and sass files nextjs 7
- NextJS dynamic import issue
- Import SASS variables into Material UI theme with NextJS
- Import multiple files in folder in React / Nextjs
- Case sensitive URL's with NextJS 10 problem
- NextJS import images in MDX
- Import html-to-draftjs on Nextjs
- problem with react slick: import { baseUrl } from "./config
- NextJs Next.config.mjs import local constant file
- How to solve the problem with types in NextJs (Typescript)?
- Node module (@pusher/push-notifications-web) failing to import on refreshing page - nextjs
- Nextjs production build problem (Links do not work)
- Import PeerJs to NextJs
- import a single getServerSideProps method to multiple pages in Nextjs
- Cannot import module in nextjs
- how to handle useRouter()s async problem in nextJS
- Nextjs Redux Persist Error - SyntaxError: Cannot use import statement outside a module
- Problem when creating 3 Column Card Grid using Bulma & Nextjs (fetch)
- How to solve SyntaxError: Cannot use import implementing Magic with NextJS in a Typescript setup?
- Unable to import images in nextjs using next images package
- nextjs dynamic routing problem with spaces
- How to get dimension from import SVG component - nextJS
More Query from same tag
- React dynamic import does not accept string variable
- Why won't my img src be read when it's a prop?
- Can't display the output of a search on another component
- Value is not updating in MaterialTable
- Can someone please tell me what am I doing wrong here? [React hooks]
- React.js and jquery Uncaught ReferenceError: (function) is not defined at HTMLTableRowElement.onclick
- Call a value from State into componentDidMount () Function API URL
- Updating the Rendered Element(immutable)
- Formik & yup form validation not working as expected with VirtualizedSelect
- Merge js object values from different data sets
- Is it possible to display react leafletjs markers on specific zoom levels?
- How to return geolocation response object to be used in different components?
- Are two actions/reducers with the same name permissible in two different reducer files?
- React VictoryBar style difficulties
- Flask and Reactjs throw JSX Transform error
- Handling icon onClick events with Material-UI and ReactJS
- process.node.env is undefined in eslintrc.js
- How to pass data from an element to an action in ReactJS?
- React useState appends the value like string instead of incrementing?
- How to set the reference to the 'leafletElement' using Typescript inside react-leaflet?
- How do I import react-admin in a React Typescript appplication?
- Missing dependency linting error on React hook
- Passed the button text to state, but text reverted back during page refresh in React hooks
- React repeated onInput handlers in components
- How do I change my mutation to accept an array of IDs instead of a single ID?
- React Rendering Different components based on hook
- How to navigate between pages using Electron and React?
- reactjs / flux: execute actions (ajax) in order
- axios post request to send form data
- Error on import CSS for react-image-gallery with webpack