Comments (3)
While writing this issue ticket, I figured it out... The subscriptions configuration (wsLink ..) should be applied in ApolloWrapper.js
rather than ApolloClient.js
, as they are being used from a client-side component. (I can't believe that I missed that and I wasted like 5 hours trying to "debug" this error ...)
I’ve decided to submit this ticket and document the solution before closing it, in case it proves helpful to someone in the future. (This is my first time submitting an issue ticket, so I’m not entirely sure if this is ok)
so the ApolloWrapper.js
should look like this
"use client";
import {ApolloLink, HttpLink, split} from "@apollo/client";
import {
ApolloNextAppProvider,
NextSSRInMemoryCache,
NextSSRApolloClient,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
import React from "react";
import {GraphQLWsLink} from "@apollo/client/link/subscriptions";
import {createClient} from "graphql-ws";
import {getMainDefinition} from "@apollo/client/utilities";
function makeClient() {
const httpLink = new HttpLink({
uri: "http://localhost:8000/graphql",
});
const wsLink = new GraphQLWsLink(createClient({
url: 'ws://localhost:8000/graphql',
connectionParams: {
authToken: "Bearer I_AM_A_VALID_AUTH_TOKEN",
},
}));
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink,
);
return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
new SSRMultipartLink({
stripDefer: true,
}),
splitLink,
])
: splitLink,
});
}
export function ApolloWrapper({ children }) {
return (
<ApolloNextAppProvider makeClient={makeClient}>
{children}
</ApolloNextAppProvider>
);
}
from apollo-client.
Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.
from apollo-client.
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.
from apollo-client.
Related Issues (20)
- Deprecate testing utilities introduced in 3.10 in favor of graphql-testing-library HOT 3
- Why does QueryResult not contain extensions but FetchResult does? HOT 3
- MockedResponse variableMatcher shows warning about no more mocked responses for the query HOT 5
- Partial data returned on error after resetting cache HOT 6
- Type error returning `IGNORE` object when using a generic `TypedDocumentNode` mutation HOT 2
- Documentataion: mutaitonHookOptions.ignoreResults requires additional clarification HOT 1
- @apollo/client reactive var state changes are not reflecting across libraries HOT 8
- fetchMore with fetchPolicy: "no-cache" makes two requests HOT 5
- Problem with custom type policy for query caching HOT 19
- App Crash when using ReactNativeFile in apollo upload client to upload file HOT 5
- Server-Side Rendering Error with @apollo/client 3.11.0 in NextJS 14.2.5 HOT 3
- When updating the list of mocks and calling 'rerender' on the component under test, the updated list of mocks is ignored and the original is still used. HOT 3
- Check on sample app suggested in the contributing doc
- [useMutation] unexpected handling of mutations vs queries on error handling HOT 2
- Evicting the cache for a query with both @include and @nonreactive directives can cause errors if variables have been changed HOT 1
- Calling `clearStore` while a lazyQuery is pending causes an error HOT 2
- Appolo Client with shopify HOT 2
- valueChanges does not trigger anymore after fetching the same object type from another, separate query HOT 2
- data is not available anymore in the onCompleted callback HOT 3
- `cache-only` fetchPolicy results in network request after deleting cached data HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo-client.