phryneas
commented
7 months ago That's very curious, thank you for the report.
I can see the __typename added in SSR requests, but not in the browser.
I'll investigate.
Open ThePatriczek opened 7 months ago
phryneas
commented
7 months ago That's very curious, thank you for the report.
I can see the __typename added in SSR requests, but not in the browser.
I'll investigate.
phryneas
commented
7 months ago Could you please try this release and report back if it fixes your issue?
npm i @apollo/experimental-nextjs-app-support@0.0.0-commit-4875530It's the end of my day now, but I'll pick this back up tomorrow and your feedback would be very valuable to me!
ThePatriczek
commented
7 months ago Could you please try this release and report back if it fixes your issue?
npm i @apollo/experimental-nextjs-app-support@0.0.0-commit-4875530It's the end of my day now, but I'll pick this back up tomorrow and your feedback would be very valuable to me!
Looks like it's fixed. Thank you!
phryneas
commented
7 months ago One thing that has come up by investigating that I wanted to run by you:
This code path has not changed since 0.8.0. What has changed is when it is executed:
In 0.8.0 it would be executed if:
In 0.9.0 it would be executed it:
So, this should only happen in "fallback" situations.
Are you seeing this all the time in your code? If yes, could you please give an example on how you use the library, or maybe even a reproduction of this happening?
ThePatriczek
commented
7 months ago @phryneas – it happens every time with version 0.9.0
Deps version
"@apollo/client": "^3.9.9",
"@apollo/experimental-nextjs-app-support": "^0.9.0",
"@graphql-codegen/cli": "^5.0.2",
"@graphql-codegen/fragment-matcher": "^5.0.2",
"@graphql-codegen/near-operation-file-preset": "^3.0.0",
"@graphql-codegen/schema-ast": "^4.0.2",
"@graphql-codegen/typed-document-node": "^5.0.6",
"@graphql-codegen/typescript": "^4.0.6",
"@graphql-codegen/typescript-operations": "^4.2.0",log from server console
{
client: <ref *1> NextSSRApolloClient {
resetStoreCallbacks: [],
clearStoreCallbacks: [],
link: ApolloLink {
request: [Function (anonymous)],
left: [ApolloLink],
right: [HttpLink]
},
cache: InMemoryCache {
assumeImmutableResults: true,
getFragmentDoc: [Function],
watches: [Set],
addTypenameTransform: [DocumentTransform],
makeVar: [Function: makeVar],
txCount: 0,
config: [Object: null prototype],
addTypename: true,
policies: [Policies],
data: [Root],
optimisticData: [Stump],
storeReader: [StoreReader],
storeWriter: [StoreWriter],
maybeBroadcastWatch: [Function],
evict: [Function (anonymous)],
modify: [Function (anonymous)],
reset: [Function (anonymous)]
},
disableNetworkFetches: false,
queryDeduplication: true,
defaultOptions: { query: [Object], watchQuery: [Object], mutate: [Object] },
typeDefs: undefined,
watchQuery: [Function: bound watchQuery],
query: [Function: bound ],
mutate: [Function: bound ],
resetStore: [Function: bound ],
reFetchObservableQueries: [Function: bound ],
version: '3.9.9',
localState: LocalState {
selectionsToResolveCache: [WeakMap],
cache: [InMemoryCache],
client: [Circular *1]
},
queryManager: QueryManager {
clientAwareness: [Object],
queries: [Map],
fetchCancelFns: [Map],
transformCache: [WeakCache],
queryIdCounter: 5,
requestIdCounter: 4,
mutationIdCounter: 1,
inFlightLinkObservables: [Trie],
cache: [InMemoryCache],
link: [ApolloLink],
defaultOptions: [Object],
queryDeduplication: true,
localState: [LocalState],
ssrMode: false,
assumeImmutableResults: true,
documentTransform: [DocumentTransform],
defaultContext: [Object: null prototype] {},
onBroadcast: undefined,
[Symbol(apollo.hook.wrappers)]: [Object]
},
watchQueryQueue: { push: [Function: push], register: [Function: register] },
[Symbol(apollo.suspenseCache)]: SuspenseCache {
queryRefs: [Trie],
options: [Object: null prototype] {}
}
},
data: {
node: {
__typename: 'TableView',
name: 'All',
id: 'VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw'
}
},
error: undefined,
networkStatus: 1,
fetchMore: [Function (anonymous)],
refetch: [Function (anonymous)],
subscribeToMore: [Function (anonymous)]
}graphql operation (separated in graphql file, generated typedNode via gql codegen)
query tableViewWithConfig($id: ID!) {
node(id: $id) {
...TableViewWithConfig
}
}
fragment Node on Node {
id
}
fragment DatasetView on DatasetView {
...Node
name
}
fragment Property on Property {
...Node
name
primary
}
fragment TextProperty on TextProperty {
...Property
}
fragment DateProperty on DateProperty {
...Property
dateFormat
timeFormat
}
fragment SelectOption on SelectOption {
...Node
value
color
}
fragment SingleSelectProperty on SingleSelectProperty {
...Property
options {
...SelectOption
}
}
fragment MultiSelectProperty on MultiSelectProperty {
...Property
options {
...SelectOption
}
}
fragment RelationProperty on RelationProperty {
...Property
relationType
relation {
...Node
}
}
fragment RollupProperty on RollupProperty {
...Property
relation {
...Node
}
property {
...Property
}
}
fragment Properties on Property {
...Property
...TextProperty
...DateProperty
...SingleSelectProperty
...MultiSelectProperty
...RelationProperty
...RollupProperty
}
fragment TableViewWithConfig on TableView {
...DatasetView
config {
id
properties {
...Node
options {
visible
property {
...Properties
}
}
}
}
}gql codegen config
const config: CodegenConfig = {
schema: [
{
[`${process.env.BACKEND_URL}/graphql`]: {
headers: {
Authorization: `Bearer ${process.env.ACCESS_TOKEN}`,
},
},
},
],
documents: ['app/**/*.graphql'],
generates: {
'app/_graphql': {
preset: 'near-operation-file',
presetConfig: {
extension: '.generated.ts',
baseTypesPath: 'schema.generated.ts',
},
plugins: ['typescript-operations', 'typed-document-node'],
config: {
scalars: codegenScalars,
},
},
'app/_graphql/introspection.generated.json': {
plugins: ['fragment-matcher'],
config: {
scalars: codegenScalars,
},
},
},
}response in browser __typename missing
Apollo devtools field config is missing
inmemory cache config
export const defaultCacheConfig: InMemoryCacheConfig = {
possibleTypes: introspection.possibleTypes,
addTypename: true,
dataIdFromObject(responseObject) {
if (typeof responseObject.id === 'string') {
return responseObject.id //? Global Object Identification
}
return defaultDataIdFromObject(responseObject)
},
typePolicies: {
Workspace: {
fields: {
datasets: {
read: (existing: Dataset[] | undefined, { canRead }) =>
existing?.filter(canRead),
},
},
},
Record: {
fields: {
properties: (existing: PropertyValue[] | undefined, { canRead }) =>
existing?.filter((propertyValue) => canRead(propertyValue.property)),
},
},
TableView: {
fields: {
data: relayStylePagination(),
},
},
AttachmentValue: {
fields: {
attachments: {
read: (existing: Attachment[] | undefined, { canRead }) =>
existing?.filter(canRead),
},
},
},
RelationValue: {
fields: {
records: {
read: (existing: Record[] | undefined, { canRead }) =>
existing?.filter(canRead),
},
},
},
PropertySettings: {
fields: {
options: (existing: ViewOption[] | undefined, { canRead }) =>
existing?.filter((option) => canRead(option.property)),
},
},
Dataset: {
fields: {
records: {
read: (existing: Record[] | undefined, { canRead }) =>
existing?.filter(canRead),
},
},
},
},
}
export const createCache = () => new NextSSRInMemoryCache(defaultCacheConfig)apollo wrapper
'use client'
// ^ this file needs the "use client" pragma
import { ApolloLink, HttpLink, split } from '@apollo/client'
import {
ApolloNextAppProvider,
NextSSRApolloClient,
SSRMultipartLink,
} from '@apollo/experimental-nextjs-app-support/ssr'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
import { Kind, OperationTypeNode } from 'graphql/language'
import { getMainDefinition } from '@apollo/client/utilities'
import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev'
import { setVerbosity } from 'ts-invariant'
import { createCache } from '@/_graphql/apollo/createCache'
import { getApolloClientDefaultOptions } from '@/_graphql/apollo/getApolloClientDefaultOptions'
import { getGraphqlWsUri } from '../utils/getGraphqlWsUri'
import { getGraphqlHttpUri } from '../utils/getGraphqlHttpUri'
import { getAuthLink } from './getAuthLink'
import { getErrorLink } from './getErrorLink'
if (process.env.NODE_ENV === 'development') {
setVerbosity('debug')
loadDevMessages()
loadErrorMessages()
}
// have a function to create a client for you
const makeClient = (cookie: string) => () => {
const errorLink = getErrorLink()
const authLink = getAuthLink()
const httpLink = new HttpLink({
uri: getGraphqlHttpUri(),
fetchOptions: { cache: 'no-store' },
credentials: 'include',
headers: {
cookie,
},
})
return new NextSSRApolloClient({
// use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
connectToDevTools: typeof window !== 'undefined',
cache: createCache(),
defaultOptions: getApolloClientDefaultOptions(),
link:
typeof window === 'undefined'
? ApolloLink.from([
errorLink,
authLink,
// in a SSR environment, if you use multipart features like
// @defer, you need to decide how to handle these.
// This strips all interfaces with a `@defer` directive from your queries.
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: ApolloLink.from([
errorLink,
authLink,
split(
({ query }) => {
const mainDefinition = getMainDefinition(query)
return (
mainDefinition.kind === Kind.OPERATION_DEFINITION &&
mainDefinition.operation === OperationTypeNode.SUBSCRIPTION
)
},
new GraphQLWsLink(
createClient({
url: getGraphqlWsUri(),
keepAlive: 10_000,
connectionParams: () => ({
// Authorization: getCookie(cookie, 'accessToken'),
}),
}),
),
httpLink,
),
]),
})
}
// you need to create a component to wrap your app in
export const ApolloWrapper = ({
children,
cookie,
}: React.PropsWithChildren<{ cookie: string }>) => {
return (
<ApolloNextAppProvider makeClient={makeClient(cookie)}>
{children}
</ApolloNextAppProvider>
)
}@phryneas Maybe could be problem with my cache config and dataIdFromObject?
dataIdFromObject(responseObject) {
if (typeof responseObject.id === 'string') {
return responseObject.id //? Global Object Identification
}
return defaultDataIdFromObject(responseObject)
},I use the node interface and rely on the fact that objects can be identified just by ID (Global object identification standard, relay like)
phryneas
commented
7 months ago Could you set the log level to debug and see what it logs you in the browser?
import { setVerbosity } from "ts-invariant";
setVerbosity("debug");Also, which hooks are you using in your components?
ThePatriczek
commented
7 months ago @phryneas
received data from the server
{
"rehydrate": {
":R6uuulsmukq:": {
"data": {},
"complete": false,
"missing": "Dangling reference to missing RGF0YXNldDoyNzI4Y2NlNC0yMjQxLTRhM2MtYjM0MS1lNTFmODlkN2M4M2E object"
},
":R2muuulsmukq:": {
"data": {},
"complete": false,
"missing": "Dangling reference to missing RGF0YXNldDoyNzI4Y2NlNC0yMjQxLTRhM2MtYjM0MS1lNTFmODlkN2M4M2E object"
},
":R1d5auuulsmukq:": {
"loading": true,
"networkStatus": 1,
"called": true
},
":Rnjfeuuulsmukq:": {
"data": {
"node": {
"__typename": "TableView",
"name": "All",
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
}
},
"networkStatus": 7
},
":R1njfeuuulsmukq:": {
"data": {
"node": {
"__typename": "TableView",
"name": "All",
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
}
},
"networkStatus": 1
},
":R1njfeuuulsmukqH1:": {
"data": {
"node": {
"__typename": "TableView",
"recordCount": 4,
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
}
},
"loading": true,
"networkStatus": 1,
"called": true
},
":R1njfeuuulsmukqH2:": {
"data": {
"node": {
"__typename": "Dataset",
"name": "suspense test",
"id": "RGF0YXNldDoyNzI4Y2NlNC0yMjQxLTRhM2MtYjM0MS1lNTFmODlkN2M4M2E"
}
},
"loading": true,
"networkStatus": 1,
"called": true
},
":Rquuulsmukq:": {
"data": {
"node": {
"__typename": "Dataset",
"views": [
{
"__typename": "TableView",
"recordCount": 4,
"name": "All",
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
}
],
"name": "suspense test",
"members": [
{
"__typename": "Member",
"user": {
"__typename": "User",
"name": "Szewczyk Patrik",
"email": "szewczyk@atlasgroup.cz",
"id": "VXNlcjowNWY2MjRjMC1lYzEwLTExZTktYThlNC05OWY4ZjRkODZmMzA"
},
"permission": "FULL_ACCESS"
}
],
"id": "RGF0YXNldDoyNzI4Y2NlNC0yMjQxLTRhM2MtYjM0MS1lNTFmODlkN2M4M2E"
}
},
"networkStatus": 7
}
},
"events": [
{
"type": "started",
"options": {
"variables": {
"datasetId": "RGF0YXNldDoyNzI4Y2NlNC0yMjQxLTRhM2MtYjM0MS1lNTFmODlkN2M4M2E",
"includeMembers": true
},
"fetchPolicy": "cache-first",
"query": {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": {
"kind": "Name",
"value": "datasetViews"
},
"variableDefinitions": [
{
"kind": "VariableDefinition",
"variable": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "datasetId"
}
},
"type": {
"kind": "NonNullType",
"type": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "ID"
}
}
}
},
{
"kind": "VariableDefinition",
"variable": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "includeMembers"
}
},
"type": {
"kind": "NonNullType",
"type": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Boolean"
}
}
},
"defaultValue": {
"kind": "BooleanValue",
"value": false
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "node"
},
"arguments": [
{
"kind": "Argument",
"name": {
"kind": "Name",
"value": "id"
},
"value": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "datasetId"
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "InlineFragment",
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Dataset"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Dataset"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DatasetWithMembers"
},
"directives": [
{
"kind": "Directive",
"name": {
"kind": "Name",
"value": "include"
},
"arguments": [
{
"kind": "Argument",
"name": {
"kind": "Name",
"value": "if"
},
"value": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "includeMembers"
}
}
}
]
}
]
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "views"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "recordCount"
}
}
]
}
}
]
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Node"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Node"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Dataset"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Dataset"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "User"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "User"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "email"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DatasetWithMembers"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Dataset"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Dataset"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "members"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "user"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "User"
}
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "permission"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DatasetView"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
}
]
}
}
]
},
"notifyOnNetworkStatusChange": false
},
"id": "1"
},
{
"type": "started",
"options": {
"variables": {
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
},
"fetchPolicy": "cache-first",
"query": {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": {
"kind": "Name",
"value": "datasetView"
},
"variableDefinitions": [
{
"kind": "VariableDefinition",
"variable": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id"
}
},
"type": {
"kind": "NonNullType",
"type": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "ID"
}
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "node"
},
"arguments": [
{
"kind": "Argument",
"name": {
"kind": "Name",
"value": "id"
},
"value": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id"
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DatasetView"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Node"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Node"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DatasetView"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
}
]
}
}
]
},
"notifyOnNetworkStatusChange": false
},
"id": "3"
},
{
"type": "data",
"id": "3",
"result": {
"data": {
"node": {
"__typename": "TableView",
"name": "All",
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
}
}
}
},
{
"type": "complete",
"id": "3"
},
{
"type": "data",
"id": "1",
"result": {
"data": {
"node": {
"__typename": "Dataset",
"views": [
{
"__typename": "TableView",
"recordCount": 4,
"name": "All",
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
}
],
"name": "suspense test",
"members": [
{
"__typename": "Member",
"user": {
"__typename": "User",
"name": "Szewczyk Patrik",
"email": "szewczyk@atlasgroup.cz",
"id": "VXNlcjowNWY2MjRjMC1lYzEwLTExZTktYThlNC05OWY4ZjRkODZmMzA"
},
"permission": "FULL_ACCESS"
}
],
"id": "RGF0YXNldDoyNzI4Y2NlNC0yMjQxLTRhM2MtYjM0MS1lNTFmODlkN2M4M2E"
}
}
}
},
{
"type": "complete",
"id": "1"
},
{
"type": "started",
"options": {
"variables": {
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
},
"fetchPolicy": "cache-first",
"query": {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": {
"kind": "Name",
"value": "tableViewWithConfig"
},
"variableDefinitions": [
{
"kind": "VariableDefinition",
"variable": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id"
}
},
"type": {
"kind": "NonNullType",
"type": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "ID"
}
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "node"
},
"arguments": [
{
"kind": "Argument",
"name": {
"kind": "Name",
"value": "id"
},
"value": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id"
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "TableViewWithConfig"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Node"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Node"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DatasetView"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Property"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Property"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "primary"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "TextProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "TextProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DateProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "DateProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "dateFormat"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "timeFormat"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "SelectOption"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "SelectOption"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "value"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "color"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "SingleSelectProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "SingleSelectProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "options"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "SelectOption"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "MultiSelectProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "MultiSelectProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "options"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "SelectOption"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "RelationProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "RelationProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relationType"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relation"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "RollupProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "RollupProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relation"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "property"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Properties"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Property"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "TextProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DateProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "SingleSelectProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "MultiSelectProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "RelationProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "RollupProperty"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "TableViewWithConfig"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "TableView"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "config"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "properties"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "options"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "visible"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "property"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Properties"
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
},
"notifyOnNetworkStatusChange": false
},
"id": "4"
}
]
}streaming connection closed before server query could be fully transported, rerunning:
{
"variables": {
"id": "VGFibGVWaWV3OjNmOTg1MzM1LTVkZGQtNGE2OC04YjJkLTNhMWUxMTk1NjAyYw"
},
"fetchPolicy": "cache-first",
"query": {
"kind": "Document",
"definitions": [
{
"kind": "OperationDefinition",
"operation": "query",
"name": {
"kind": "Name",
"value": "tableViewWithConfig"
},
"variableDefinitions": [
{
"kind": "VariableDefinition",
"variable": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id"
}
},
"type": {
"kind": "NonNullType",
"type": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "ID"
}
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "node"
},
"arguments": [
{
"kind": "Argument",
"name": {
"kind": "Name",
"value": "id"
},
"value": {
"kind": "Variable",
"name": {
"kind": "Name",
"value": "id"
}
}
}
],
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "TableViewWithConfig"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Node"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Node"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DatasetView"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Property"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Property"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "name"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "primary"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "TextProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "TextProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "DateProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "DateProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "dateFormat"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "timeFormat"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "SelectOption"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "SelectOption"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "value"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "color"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "SingleSelectProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "SingleSelectProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "options"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "SelectOption"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "MultiSelectProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "MultiSelectProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "options"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "SelectOption"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "RelationProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "RelationProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relationType"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relation"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "RollupProperty"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "RollupProperty"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "relation"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
}
]
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "property"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
}
]
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "Properties"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "Property"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Property"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "TextProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DateProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "SingleSelectProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "MultiSelectProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "RelationProperty"
}
},
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "RollupProperty"
}
}
]
}
},
{
"kind": "FragmentDefinition",
"name": {
"kind": "Name",
"value": "TableViewWithConfig"
},
"typeCondition": {
"kind": "NamedType",
"name": {
"kind": "Name",
"value": "TableView"
}
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "DatasetView"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "config"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "id"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "properties"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Node"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "options"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "visible"
}
},
{
"kind": "Field",
"name": {
"kind": "Name",
"value": "property"
},
"selectionSet": {
"kind": "SelectionSet",
"selections": [
{
"kind": "FragmentSpread",
"name": {
"kind": "Name",
"value": "Properties"
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
}
}
]
},
"notifyOnNetworkStatusChange": false
}streaming connection closed before server query could be fully transported, rerunning:
This should be an exception, not the norm every time you render a component or page - it should only happen if you use useBackgroundQuery without running useReadQuery on the queryRef. Is that the case here? What (hook?) is triggering these queries?
ThePatriczek
commented
7 months ago Nope, I use useSuspenseQuery
const result = useSuspenseQuery(TableViewWithConfigDocument,{
variables: { id },
})It looks like your datasetViews and datasetView queries are correctly transported over, but then the rendering of your React tree ends (and thus, the connection closes) before tableViewWithConfig can finish transporting to the browser.
Do you have any possible explanation for this, e.g. components triggering an error and triggering an error boundary during SSR? (Or is tableViewWithConfig maybe triggered from something that's not useSuspenseQuery?)
ThePatriczek
commented
7 months ago @phryneas I have no errors in browser console nor in server console or even error boundaries in code, 0 fallbacks to Error.tsx in routing, Apollo error link – nothing...
phryneas
commented
7 months ago And with logging enabled, do you get that same
streaming connection closed before server query could be fully transported, rerunning:
in 0.8.0?
ThePatriczek
commented
7 months ago @phryneas There is no any verbose logs in version 0.8.0
phryneas
commented
7 months ago Nothing? That seems wrong, even in a 100% success, it should log something.
github-actions[bot]
commented
7 months ago 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.
phryneas
commented
7 months ago This should not have autoclosed, I'm just getting #257 released as 0.9.1 on the side, because that's definitely a necessary bugfix regardless if we find something on top of it here :)
ThePatriczek
commented
7 months ago Nothing? That seems wrong, even in a 100% success, it should log something.
I can't see any logs related with apollo/react, 0 verbose
phryneas
commented
7 months ago Hm.
They should come out as debug level - you should definitely be hitting this line in the 0.8.0 release: https://github.com/apollographql/apollo-client-nextjs/blob/88dc5b93734a268e2c578ec19ea3a02b086555ac/package/src/ssr/dataTransport.ts#L39
phryneas
commented
7 months ago Problem is: I'd love to help you further with this, but it's the end of my day again and I'll be away for the next 5 days.
As for now, I've published the __typename fix as 0.9.1 as that's all I can do.
It would be great if in the meantime you could provide me with some kind of reproduction for that early-closing stream that you are seeing, as I can't reproduce that here in any of our integration tests.
I'd love to dig deeper into this as soon as I'm back.
ThePatriczek
commented
7 months ago @phryneas
I found the problem of why an unnecessary query was called in the browser and data was missing on the server, a node query with the same __typename was processed somewhere outside the Component that called useSuspenseQuery hook, and because of returnPartialData: true in my client config, incomplete data was pulled from the cache on the server in the suspense query of that node of course...
My mistake, I'm sorry, but the hotfix 0.9.1 with the __typename in the browser operation was still necessary.
import type { DefaultOptions } from '@apollo/client'
export const getApolloClientDefaultOptions = (): DefaultOptions => ({
query: {
errorPolicy: 'all',
returnPartialData: true, // config field missing on server problem
fetchPolicy: 'cache-first',
},
watchQuery: {
errorPolicy: 'all',
returnPartialData: true, // config field missing on server problem
fetchPolicy: 'cache-first',
},
mutate: {
errorPolicy: 'all',
onQueryUpdated: (observableQuery) => observableQuery.refetch(),
},
})So I set the field returnPartialData to typeof window !== 'undefined'
plausible-phry
commented
7 months ago Great that you found it!
I just got another idea that might add a puzzle piece here, so I'm writing from my vacation account 😅
Before 0.9.0, you needed to use the hooks imported from "@apollo/experimental-nextjs-app-support/ssr" - if you didn't do that, the package couldn't transport data over.
Since 0.9.0, you just need to create the NextSSRApolloClient/InMemoryCache from the "@apollo/experimental-nextjs-app-support/ssr" package - and it also works if you use the hooks imported from @apollo/client.
So my guess here why you don't see any logs when going back to 0.8.0 would be: did you maybe import the hooks from the (back then) wrong package?
In version 0.8.0:
__typenamein every type by default In version 0.9.0:__typenamemissing by default, it's included only when specific type has explicit__typenamefield to resolve in operationeven with cache config option
addTypename: true.