├── .changeset
└── config.json
├── .circleci
└── config.yml
├── .git-blame-ignore-revs
├── .github
├── renovate.json5
└── workflows
│ ├── docs.yml
│ ├── issue-close-user-survey.yml
│ ├── knip.yml
│ ├── pkg-pr-new-publish.yml
│ ├── publish.yml
│ ├── relative-ci.yaml
│ ├── size-limit.yml
│ ├── tests.yml
│ └── vercel-integration.yml
├── .gitignore
├── .gitleaksignore
├── .prettierrc
├── .size-limit.cjs
├── .yarn
├── patches
│ └── react-router-npm-7.1.5-9668fa2213.patch
└── releases
│ └── yarn-4.9.1.cjs
├── .yarnrc.yml
├── CODEOWNERS
├── LICENSE
├── README.md
├── api-extractor.json
├── banner.jpg
├── docs
├── client-integration-nextjs.apolloclient.md
├── client-integration-nextjs.apollonextappprovider.md
├── client-integration-nextjs.debouncemultipartresponseslink._constructor_.md
├── client-integration-nextjs.debouncemultipartresponseslink.md
├── client-integration-nextjs.debouncemultipartresponseslink.request.md
├── client-integration-nextjs.inmemorycache.md
├── client-integration-nextjs.md
├── client-integration-nextjs.preloadquerycomponent.md
├── client-integration-nextjs.preloadqueryprops.children.md
├── client-integration-nextjs.preloadqueryprops.md
├── client-integration-nextjs.registerapolloclient.md
├── client-integration-nextjs.removemultipartdirectiveslink._constructor_.md
├── client-integration-nextjs.removemultipartdirectiveslink.md
├── client-integration-nextjs.removemultipartdirectiveslink.request.md
├── client-integration-nextjs.resetapolloclientsingletons.md
├── client-integration-nextjs.ssrmultipartlink._constructor_.md
├── client-integration-nextjs.ssrmultipartlink.md
├── client-integration-nextjs.transportedqueryref.md
├── client-integration-nextjs.transportedqueryref.topromise.md
├── client-integration-react-router.apolloclient._constructor_.md
├── client-integration-react-router.apolloclient.md
├── client-integration-react-router.apolloclient.setlink.md
├── client-integration-react-router.apollohydrationhelper.md
├── client-integration-react-router.createapolloloaderhandler.apolloloader.md
├── client-integration-react-router.createapolloloaderhandler.md
├── client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md
├── client-integration-react-router.md
├── client-integration-tanstack-start.apolloclient.md
├── client-integration-tanstack-start.apolloclientroutercontext.apolloclient.md
├── client-integration-tanstack-start.apolloclientroutercontext.md
├── client-integration-tanstack-start.apolloclientroutercontext.preloadquery.md
├── client-integration-tanstack-start.inmemorycache.md
├── client-integration-tanstack-start.md
├── client-integration-tanstack-start.routerwithapolloclient.md
├── client-react-streaming.apolloclient.md
├── client-react-streaming.buildmanualdatatransport.md
├── client-react-streaming.createtransportedquerypreloader.md
├── client-react-streaming.datatransportcontext.md
├── client-react-streaming.datatransportproviderimplementation.md
├── client-react-streaming.debouncemultipartresponseslink._constructor_.md
├── client-react-streaming.debouncemultipartresponseslink.md
├── client-react-streaming.debouncemultipartresponseslink.request.md
├── client-react-streaming.hydrationcontextoptions.extrascriptprops.md
├── client-react-streaming.hydrationcontextoptions.md
├── client-react-streaming.inmemorycache._constructor_.md
├── client-react-streaming.inmemorycache._sourcesymbol_.md
├── client-react-streaming.inmemorycache.md
├── client-react-streaming.istransportedqueryref.md
├── client-react-streaming.md
├── client-react-streaming.preloadquerycomponent.md
├── client-react-streaming.preloadqueryprops.children.md
├── client-react-streaming.preloadqueryprops.md
├── client-react-streaming.preloadtransportedqueryfunction.md
├── client-react-streaming.preloadtransportedqueryoptions.md
├── client-react-streaming.queryevent.md
├── client-react-streaming.readfromreadablestream.md
├── client-react-streaming.readfromreadablestreamlink._constructor_.md
├── client-react-streaming.readfromreadablestreamlink.md
├── client-react-streaming.registerapolloclient.md
├── client-react-streaming.registerlateinitializingqueue.md
├── client-react-streaming.removemultipartdirectiveslink._constructor_.md
├── client-react-streaming.removemultipartdirectiveslink.md
├── client-react-streaming.removemultipartdirectiveslink.request.md
├── client-react-streaming.resetapollosingletons.md
├── client-react-streaming.resetmanualssrapollosingletons.md
├── client-react-streaming.revivetransportedqueryref.md
├── client-react-streaming.skipdatatransport.md
├── client-react-streaming.ssrmultipartlink._constructor_.md
├── client-react-streaming.ssrmultipartlink.md
├── client-react-streaming.teetoreadablestream.md
├── client-react-streaming.teetoreadablestreamlink._constructor_.md
├── client-react-streaming.teetoreadablestreamlink.md
├── client-react-streaming.transportedqueryref.md
├── client-react-streaming.transportedqueryref.topromise.md
├── client-react-streaming.usewraptransportedqueryref.md
├── client-react-streaming.wrapapolloprovider.md
├── client-react-streaming.wrappedapolloprovider.info.md
├── client-react-streaming.wrappedapolloprovider.md
└── index.md
├── examples
├── README.md
├── app-dir-experiments
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── .vscode
│ │ └── settings.json
│ ├── README.md
│ ├── app
│ │ ├── ApolloClient.ts
│ │ ├── api
│ │ │ └── graphql
│ │ │ │ └── route.ts
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── ssr
│ │ │ ├── ApolloWrapper.tsx
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ ├── components
│ │ └── HtmlChangesObserver.tsx
│ ├── next.config.js
│ ├── package.json
│ ├── public
│ │ ├── next.svg
│ │ ├── thirteen.svg
│ │ └── vercel.svg
│ └── tsconfig.json
├── hack-the-supergraph-ssr
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app
│ │ ├── ApolloWrapper.tsx
│ │ ├── ClientLayout.tsx
│ │ ├── error.tsx
│ │ ├── layout.tsx
│ │ ├── not-found.tsx
│ │ ├── page.tsx
│ │ └── product
│ │ │ └── [id]
│ │ │ └── page.tsx
│ ├── components
│ │ ├── Button.tsx
│ │ ├── DelaySlider.tsx
│ │ ├── Logo.tsx
│ │ ├── Nav.tsx
│ │ ├── ProductCard.tsx
│ │ ├── ReviewRating.tsx
│ │ ├── SettingsModal.tsx
│ │ └── Spinner.tsx
│ ├── logo.css
│ ├── logo.svg
│ ├── next.config.js
│ ├── package.json
│ ├── theme.js
│ └── tsconfig.json
└── polls-demo
│ ├── .eslintrc.json
│ ├── .gitignore
│ ├── README.md
│ ├── app
│ ├── cc
│ │ ├── apollo-wrapper.tsx
│ │ ├── error.tsx
│ │ ├── layout.tsx
│ │ ├── page.tsx
│ │ └── poll-cc.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ └── rsc
│ │ ├── client.ts
│ │ ├── page.tsx
│ │ └── poll-rsc.tsx
│ ├── codegen.ts
│ ├── components
│ ├── answer.tsx
│ ├── poll
│ │ ├── documents.generated.ts
│ │ ├── documents.graphql
│ │ └── index.tsx
│ └── types.generated.ts
│ ├── next.config.js
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ ├── next.svg
│ └── vercel.svg
│ ├── tailwind.config.js
│ └── tsconfig.json
├── integration-test
├── .gitignore
├── jest
│ ├── babel.config.js
│ ├── jest.config.js
│ ├── package.json
│ ├── setupAfterEnv.jest.ts
│ └── src
│ │ ├── App.jsx
│ │ ├── App.test.jsx
│ │ ├── hooks.test.jsx
│ │ └── schema.js
├── nextjs
│ ├── .env.local
│ ├── next-env.d.ts
│ ├── next.config.js
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── cc
│ │ │ │ ├── ApolloWrapper.tsx
│ │ │ │ ├── dynamic
│ │ │ │ │ ├── layout.tsx
│ │ │ │ │ ├── useBackgroundQuery
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ ├── useBackgroundQueryWithoutSsrReadQuery
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ ├── useQuery
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ ├── useQueryWithCache
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ └── useSuspenseQuery
│ │ │ │ │ │ └── page.tsx
│ │ │ │ └── static
│ │ │ │ │ ├── layout.tsx
│ │ │ │ │ ├── useBackgroundQueryWithoutSsrReadQuery
│ │ │ │ │ └── page.tsx
│ │ │ │ │ └── useSuspenseQuery
│ │ │ │ │ └── page.tsx
│ │ │ ├── graphql
│ │ │ │ └── route.ts
│ │ │ ├── layout.tsx
│ │ │ └── rsc
│ │ │ │ ├── client.ts
│ │ │ │ ├── dynamic
│ │ │ │ ├── PreloadQuery
│ │ │ │ │ ├── defer-queryRef-useReadQuery
│ │ │ │ │ │ ├── ClientChild.tsx
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ ├── error.tsx
│ │ │ │ │ ├── queryRef-useReadQuery
│ │ │ │ │ │ ├── ClientChild.tsx
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ └── useSuspenseQuery
│ │ │ │ │ │ ├── ClientChild.tsx
│ │ │ │ │ │ └── page.tsx
│ │ │ │ └── query
│ │ │ │ │ └── page.tsx
│ │ │ │ └── static
│ │ │ │ └── query
│ │ │ │ └── page.tsx
│ │ ├── global.d.ts
│ │ └── middleware.ts
│ └── tsconfig.json
├── playwright
│ ├── empty.har
│ ├── fixture.ts
│ ├── package.json
│ ├── playwright.config.ts
│ ├── src
│ │ ├── cc-dynamic.test.ts
│ │ ├── cc-static.test.ts
│ │ ├── helpers.ts
│ │ ├── preloadQuery.test.ts
│ │ ├── rsc-dynamic.test.ts
│ │ └── rsc-static.test.ts
│ └── tsconfig.json
├── react-router
│ ├── .gitignore
│ ├── README.md
│ ├── app
│ │ ├── apollo.ts
│ │ ├── entry.client.tsx
│ │ ├── entry.server.tsx
│ │ ├── root.tsx
│ │ ├── routes.ts
│ │ └── routes
│ │ │ ├── _index.tsx
│ │ │ ├── asyncLoader.tsx
│ │ │ ├── graphql.ts
│ │ │ ├── preloadQuery.queryRef-useReadQuery.tsx
│ │ │ └── preloadQuery.useSuspenseQuery.tsx
│ ├── package.json
│ ├── public
│ │ └── favicon.ico
│ ├── react-router.config.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── shared
│ ├── IncrementalSchemaLink.ts
│ ├── apiRoute.ts
│ ├── delayLink.ts
│ ├── errorLink.tsx
│ ├── package.json
│ ├── queries.ts
│ └── schema.ts
├── tanstack-start
│ ├── app.config.ts
│ ├── app
│ │ ├── api.ts
│ │ ├── client.tsx
│ │ ├── routeTree.gen.ts
│ │ ├── router.tsx
│ │ ├── routes
│ │ │ ├── __root.tsx
│ │ │ ├── api.graphql.ts
│ │ │ ├── index.tsx
│ │ │ ├── loader-defer.tsx
│ │ │ ├── preloadQuery
│ │ │ │ ├── queryRef-useReadQuery.tsx
│ │ │ │ └── useSuspenseQuery.tsx
│ │ │ ├── useBackgroundQuery.tsx
│ │ │ ├── useBackgroundQueryWithoutSsrReadQuery.tsx
│ │ │ ├── useQuery.tsx
│ │ │ ├── useQueryWithCache.tsx
│ │ │ ├── useSuspenseQuery-defer.tsx
│ │ │ └── useSuspenseQuery.tsx
│ │ └── ssr.tsx
│ ├── package.json
│ └── tsconfig.json
├── vite-streaming
│ ├── index.html
│ ├── package.json
│ ├── playwright.config.ts
│ ├── server.js
│ ├── src
│ │ ├── App.css
│ │ ├── App.tsx
│ │ ├── Html.jsx
│ │ ├── Transport.tsx
│ │ ├── entry-client.jsx
│ │ ├── entry-server.jsx
│ │ ├── hydration.test.ts
│ │ └── schema.ts
│ ├── tsconfig.json
│ └── vite.config.js
└── vitest
│ ├── package.json
│ ├── setup.js
│ ├── src
│ ├── App.jsx
│ ├── App.test.jsx
│ ├── hooks.test.jsx
│ └── schema.js
│ └── vite.config.js
├── knip.config.js
├── package.json
├── packages
├── .eslintignore
├── .eslintrc.cjs
├── client-react-streaming
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── api-extractor.d.ts
│ ├── api-extractor.json
│ ├── package-shape.json
│ ├── package.json
│ ├── src
│ │ ├── AccumulateMultipartResponsesLink.test.ts
│ │ ├── AccumulateMultipartResponsesLink.ts
│ │ ├── DataTransportAbstraction
│ │ │ ├── DataTransportAbstraction.ts
│ │ │ ├── WrapApolloProvider.tsx
│ │ │ ├── WrappedApolloClient.test.tsx
│ │ │ ├── WrappedApolloClient.tsx
│ │ │ ├── WrappedInMemoryCache.tsx
│ │ │ ├── backpressuredCallback.ts
│ │ │ ├── hooks.ts
│ │ │ ├── index.ts
│ │ │ ├── symbols.ts
│ │ │ ├── testHelpers.ts
│ │ │ ├── transportedOptions.ts
│ │ │ └── useTransportValue.tsx
│ │ ├── ManualDataTransport
│ │ │ ├── ApolloRehydrateSymbols.tsx
│ │ │ ├── ManualDataTransport.tsx
│ │ │ ├── RehydrationContext.tsx
│ │ │ ├── dataTransport.ts
│ │ │ ├── htmlescape.ts
│ │ │ ├── index.ts
│ │ │ ├── lateInitializingQueue.ts
│ │ │ ├── serialization.test.ts
│ │ │ ├── serialization.ts
│ │ │ └── types.tsx
│ │ ├── PreloadQuery.tsx
│ │ ├── ReadableStreamLink.tsx
│ │ ├── RemoveMultipartDirectivesLink.test.ts
│ │ ├── RemoveMultipartDirectivesLink.ts
│ │ ├── SSRMultipartLink.ts
│ │ ├── SimulatePreloadedQuery.cc.ts
│ │ ├── assertInstance.ts
│ │ ├── bundleInfo.ts
│ │ ├── combined.ts
│ │ ├── empty.ts
│ │ ├── importErrors.test.tsx
│ │ ├── index.cc.tsx
│ │ ├── index.rsc.ts
│ │ ├── index.shared.ts
│ │ ├── index.ts
│ │ ├── registerApolloClient.test.tsx
│ │ ├── registerApolloClient.tsx
│ │ ├── stream-utils
│ │ │ ├── JSONTransformStreams.tsx
│ │ │ ├── combined.ts
│ │ │ ├── createInjectionTransformStream.test.tsx
│ │ │ ├── createInjectionTransformStream.tsx
│ │ │ ├── index.shared.ts
│ │ │ ├── index.ssr.ts
│ │ │ ├── index.ts
│ │ │ └── pipeReaderToResponse.ts
│ │ └── transportedQueryRef.ts
│ ├── tsconfig.json
│ ├── tsconfig.tests.json
│ └── tsup.config.ts
├── experimental-nextjs-app-support
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── package-shape.json
│ ├── package.json
│ ├── redirect
│ │ ├── empty.cjs
│ │ ├── empty.js
│ │ ├── index.cjs
│ │ ├── index.d.cts
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── rsc.cjs
│ │ ├── rsc.d.cts
│ │ ├── rsc.d.ts
│ │ ├── rsc.js
│ │ ├── ssr.cjs
│ │ ├── ssr.d.cts
│ │ ├── ssr.d.ts
│ │ └── ssr.js
│ └── tsconfig.json
├── nextjs
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── api-extractor.d.ts
│ ├── api-extractor.json
│ ├── package-shape.json
│ ├── package.json
│ ├── src
│ │ ├── ApolloNextAppProvider.ts
│ │ ├── bundleInfo.ts
│ │ ├── combined.ts
│ │ ├── empty.ts
│ │ ├── importErrors.test.tsx
│ │ ├── index.rsc.ts
│ │ ├── index.shared.ts
│ │ └── index.ts
│ ├── tsconfig.json
│ ├── tsconfig.tests.json
│ └── tsup.config.ts
├── package.json
├── react-router
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── package-shape.json
│ ├── package.json
│ ├── src
│ │ ├── ApolloClient.tsx
│ │ ├── ApolloHydrationHelper.tsx
│ │ ├── importErrors.test.tsx
│ │ ├── index.ts
│ │ └── preloader.tsx
│ ├── tsconfig.json
│ ├── tsconfig.tests.json
│ └── tsup.config.ts
├── tanstack-start
│ ├── CHANGELOG.md
│ ├── LICENSE.md
│ ├── README.md
│ ├── api-extractor.json
│ ├── package-shape.json
│ ├── package.json
│ ├── src
│ │ ├── ApolloProvider.tsx
│ │ ├── bundleInfo.ts
│ │ ├── importErrors.test.tsx
│ │ ├── index.ts
│ │ └── routerWithApolloClient.tsx
│ ├── tsconfig.json
│ ├── tsconfig.tests.json
│ └── tsup.config.ts
└── test-utils
│ ├── console.d.ts
│ ├── console.js
│ ├── hydrationTest.d.ts
│ ├── hydrationTest.js
│ ├── package.json
│ ├── react.d.ts
│ ├── react.js
│ ├── runInConditions.d.ts
│ ├── runInConditions.js
│ └── tsconfig.json
├── scripts
├── test-matrix.js
├── tsconfig.json
├── verify-package-json.mjs
└── verify-package-shape.mjs
├── yarn.config.cjs
└── yarn.lock
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@3.0.4/schema.json",
3 | "changelog": "@changesets/cli/changelog",
4 | "commit": false,
5 | "fixed": [["@apollo/*"]],
6 | "linked": [],
7 | "access": "public",
8 | "baseBranch": "main",
9 | "updateInternalDependencies": "patch",
10 | "ignore": [
11 | "app-dir",
12 | "hack-the-supergraph-ssr",
13 | "apollo-next-13-demo",
14 | "packages-shared",
15 | "@integration-test/**",
16 | "@apollo/client-integration-react-router",
17 | "@apollo/client-integration-tanstack-start",
18 | "@integration-test/react-router",
19 | "@integration-test/tanstack-start"
20 | ]
21 | }
22 |
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | version: 2.1
2 |
3 | orbs:
4 | secops: apollo/circleci-secops-orb@2.0.7
5 |
6 | workflows:
7 | security-scans:
8 | jobs:
9 | - secops/gitleaks:
10 | context:
11 | - platform-docker-ro
12 | - github-orb
13 | - secops-oidc
14 | git-base-revision: <<#pipeline.git.base_revision>><>< >
15 | git-revision: << pipeline.git.revision >>
16 | - secops/semgrep:
17 | context:
18 | - secops-oidc
19 | - github-orb
20 | git-base-revision: <<#pipeline.git.base_revision>><>< >
21 |
--------------------------------------------------------------------------------
/.git-blame-ignore-revs:
--------------------------------------------------------------------------------
1 | # format repository with prettier3
2 | 1be961c89558db25b45510d6397ce4d150280b93
--------------------------------------------------------------------------------
/.github/renovate.json5:
--------------------------------------------------------------------------------
1 | {
2 | $schema: "https://docs.renovatebot.com/renovate-schema.json",
3 | lockFileMaintenance: {
4 | enabled: false,
5 | },
6 | ignorePaths: ["examples/**", "integration-test/**"],
7 | ignoreDeps: [
8 | "react",
9 | "react-dom",
10 | "react-server-dom-webpack",
11 | "@apollo/experimental-nextjs-app-support",
12 | "@apollo/client-integration-nextjs",
13 | "@apollo/client-integration-tanstack-start",
14 | "@apollo/client-integration-react-router",
15 | "@apollo/client-react-streaming",
16 | "@apollo/client",
17 | ],
18 | skipInstalls: false,
19 | packageRules: [
20 | {
21 | groupName: "all devDependencies",
22 | groupSlug: "all-dev",
23 | matchPackagePatterns: ["*"],
24 | matchDepTypes: ["devDependencies"],
25 | excludePackagePatterns: ["next"],
26 | },
27 | {
28 | groupName: "all @types",
29 | groupSlug: "all-types",
30 | matchPackagePatterns: ["@types/*"],
31 | },
32 | ],
33 | }
34 |
--------------------------------------------------------------------------------
/.github/workflows/issue-close-user-survey.yml:
--------------------------------------------------------------------------------
1 | name: Issue Close User Survey
2 |
3 | on:
4 | issues:
5 | types: [closed]
6 |
7 | jobs:
8 | user-survey-comment:
9 | permissions:
10 | issues: write
11 | runs-on: ubuntu-latest
12 | if: github.repository == 'apollographql/apollo-client-integrations'
13 | steps:
14 | - run: |
15 | gh issue comment "$NUMBER" --body "$BODY"
16 | env:
17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
18 | GH_REPO: ${{ github.repository }}
19 | NUMBER: ${{ github.event.issue.number }}
20 | BODY: >
21 | Do you have any feedback for the maintainers? Please tell us by taking a [one-minute survey](https://docs.google.com/forms/d/e/1FAIpQLSczNDXfJne3ZUOXjk9Ursm9JYvhTh1_nFTDfdq3XBAFWCzplQ/viewform?usp=pp_url&entry.1170701325=Apollo+Client&entry.204965213=GitHub+Issue). Your responses will help us understand Apollo Client usage and allow us to serve you better.
22 |
--------------------------------------------------------------------------------
/.github/workflows/knip.yml:
--------------------------------------------------------------------------------
1 | name: Run Knip
2 |
3 | on: push
4 |
5 | jobs:
6 | lint:
7 | runs-on: ubuntu-latest
8 | name: Ubuntu/Node v20
9 | steps:
10 | - uses: actions/checkout@v4
11 | - uses: actions/setup-node@v4
12 | with:
13 | node-version: "20.x"
14 | cache: "yarn"
15 | - run: yarn install --immutable --mode=skip-build
16 | - run: yarn build:libs
17 | - run: yarn knip
18 |
--------------------------------------------------------------------------------
/.github/workflows/pkg-pr-new-publish.yml:
--------------------------------------------------------------------------------
1 | name: pkg-pr-new Publish
2 |
3 | on:
4 | pull_request:
5 | push:
6 | branches:
7 | - "**"
8 | tags:
9 | - "!**"
10 |
11 | jobs:
12 | prerelease:
13 | name: pkg-pr-new Publish
14 | runs-on: ubuntu-latest
15 | steps:
16 | - name: Checkout repo
17 | uses: actions/checkout@v4
18 |
19 | - name: Setup Node.js 20.x
20 | uses: actions/setup-node@v4
21 | with:
22 | node-version: 20.x
23 | cache: yarn
24 |
25 | - name: Install dependencies
26 | run: yarn install --immutable --mode=skip-build
27 |
28 | - name: Prebuild libs
29 | run: yarn build:libs
30 |
31 | - name: Build and publish to pkg.pr.new
32 | run: yarn dlx pkg-pr-new publish --no-template packages/client-react-streaming packages/experimental-nextjs-app-support packages/nextjs packages/react-router packages/tanstack-start
33 |
--------------------------------------------------------------------------------
/.github/workflows/relative-ci.yaml:
--------------------------------------------------------------------------------
1 | name: RelativeCI
2 |
3 | on:
4 | workflow_run:
5 | workflows: ["Run tests"]
6 | types:
7 | - completed
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Send bundle stats and build information to RelativeCI
14 | uses: relative-ci/agent-action@v2
15 | # if there's no artifact, we don't want to fail the build
16 | continue-on-error: true
17 | with:
18 | key: ${{ secrets.RELATIVE_CI_KEY }}
19 | token: ${{ secrets.GITHUB_TOKEN }}
20 |
--------------------------------------------------------------------------------
/.github/workflows/size-limit.yml:
--------------------------------------------------------------------------------
1 | name: "Run `size-limit`"
2 | on:
3 | pull_request:
4 | branches:
5 | - main
6 | permissions:
7 | pull-requests: write
8 | jobs:
9 | size:
10 | runs-on: ubuntu-latest
11 | env:
12 | CI_JOB_NUMBER: 1
13 | steps:
14 | - uses: actions/checkout@v4
15 | - uses: actions/setup-node@v4
16 | with:
17 | node-version: "20.x"
18 | cache: "yarn"
19 | - run: yarn install --immutable --mode=skip-build
20 | - uses: andresz1/size-limit-action@v1
21 | with:
22 | build_script: build:libs
23 | github_token: ${{ secrets.GITHUB_TOKEN }}
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .yarn/*
2 | !.yarn/patches
3 | !.yarn/plugins
4 | !.yarn/releases
5 | !.yarn/sdks
6 | !.yarn/versions
7 | node_modules/
8 | tsconfig.tsbuildinfo
9 | dist/
10 | .yalc
11 | yalc.lock
12 | *.tgz
13 | .DS_Store
14 | .vscode/
15 | .vercel
16 | .next/
17 | test-results/
18 | temp/
19 | .built
--------------------------------------------------------------------------------
/.gitleaksignore:
--------------------------------------------------------------------------------
1 | b25b92e919d2b3b3b645a65b83f31e712cc498bb:.yarn/releases/yarn-4.0.1.cjs:aws-access-token:149
2 | b25b92e919d2b3b3b645a65b83f31e712cc498bb:.yarn/releases/yarn-4.0.1.cjs:generic-api-key:567
3 | 58211dd42b666872d662aefe78bb7148fe7e6a6d:.yarn/releases/yarn-4.0.1.cjs:aws-access-token:149
4 | 58211dd42b666872d662aefe78bb7148fe7e6a6d:.yarn/releases/yarn-4.0.1.cjs:generic-api-key:567
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/prettierrc",
3 | "bracketSpacing": true,
4 | "printWidth": 80,
5 | "semi": true,
6 | "singleQuote": false,
7 | "tabWidth": 2,
8 | "trailingComma": "es5"
9 | }
10 |
--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | compressionLevel: mixed
2 |
3 | enableConstraintsChecks: true
4 |
5 | enableGlobalCache: false
6 |
7 | nodeLinker: node-modules
8 |
9 | npmAuthToken: "${NODE_AUTH_TOKEN-}"
10 |
11 | yarnPath: .yarn/releases/yarn-4.9.1.cjs
12 |
--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # This file was automatically generated by the Apollo SecOps team
2 | # Please customize this file as needed prior to merging.
3 |
4 | * @apollographql/client-typescript
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2023 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This repository contains multiple packages. Please choose one of the following links to get to the right README:
2 |
3 | # [Apollo Client - Next.js integration](./packages/nextjs)
4 |
5 | # [Apollo Client - React Router integration](./packages/react-router)
6 |
7 | # [Apollo Client - TanStack Start integration](./packages/tanstack-start)
8 |
9 | # [Apollo Client - base package to create custom streaming SSR integrations](./packages/client-react-streaming)
10 |
--------------------------------------------------------------------------------
/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3 | "projectFolder": ".",
4 | "newlineKind": "lf",
5 | "compiler": {
6 | "skipLibCheck": true
7 | },
8 | "apiReport": {
9 | "enabled": false
10 | },
11 | "docModel": {
12 | "enabled": true
13 | },
14 | "dtsRollup": {
15 | "enabled": false
16 | },
17 | "tsdocMetadata": {
18 | "enabled": false
19 | },
20 | "messages": {
21 | "compilerMessageReporting": {
22 | "default": {
23 | "logLevel": "warning"
24 | }
25 | },
26 | "extractorMessageReporting": {
27 | "default": {
28 | "logLevel": "warning"
29 | },
30 | "ae-forgotten-export": {
31 | "addToApiReportFile": false,
32 | "logLevel": "none"
33 | },
34 | "ae-internal-missing-underscore": {
35 | "addToApiReportFile": false,
36 | "logLevel": "none"
37 | },
38 | "ae-incompatible-release-tags": {
39 | "addToApiReportFile": false,
40 | "logLevel": "none"
41 | }
42 | },
43 | "tsdocMessageReporting": {
44 | "default": {
45 | "logLevel": "warning"
46 | },
47 | "tsdoc-escape-greater-than": {
48 | "logLevel": "none"
49 | }
50 | }
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/apollo-client-integrations/c465affd9e31674e868cdc7ac90cf0cab4c7f70e/banner.jpg
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.apolloclient.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [ApolloClient](./client-integration-nextjs.apolloclient.md)
4 |
5 | ## ApolloClient class
6 |
7 | A version of `ApolloClient` to be used with streaming SSR or in React Server Components.
8 |
9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient).
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | declare class ApolloClient extends ApolloClient$1
15 | ```
16 | **Extends:** ApolloClient$1<TCacheShape>
17 |
18 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.debouncemultipartresponseslink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [DebounceMultipartResponsesLink](./client-integration-nextjs.debouncemultipartresponseslink.md) > [(constructor)](./client-integration-nextjs.debouncemultipartresponseslink._constructor_.md)
4 |
5 | ## DebounceMultipartResponsesLink.(constructor)
6 |
7 | Constructs a new instance of the `AccumulateMultipartResponsesLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config: AccumulateMultipartResponsesConfig);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | AccumulateMultipartResponsesConfig
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.debouncemultipartresponseslink.request.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [DebounceMultipartResponsesLink](./client-integration-nextjs.debouncemultipartresponseslink.md) > [request](./client-integration-nextjs.debouncemultipartresponseslink.request.md)
4 |
5 | ## DebounceMultipartResponsesLink.request() method
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | request(operation: Operation, forward?: NextLink): Observable, Record, Record>>;
11 | ```
12 |
13 | ## Parameters
14 |
15 |
16 |
17 | Parameter
18 |
19 |
20 |
21 |
22 | Type
23 |
24 |
25 |
26 |
27 | Description
28 |
29 |
30 |
31 |
32 |
33 | operation
34 |
35 |
36 |
37 |
38 | Operation
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | forward
48 |
49 |
50 |
51 |
52 | NextLink
53 |
54 |
55 |
56 |
57 | _(Optional)_
58 |
59 |
60 |
61 |
62 | **Returns:**
63 |
64 | Observable<FetchResult<Record<string, any>, Record<string, any>, Record<string, any>>>
65 |
66 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.inmemorycache.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [InMemoryCache](./client-integration-nextjs.inmemorycache.md)
4 |
5 | ## InMemoryCache class
6 |
7 | A version of `InMemoryCache` to be used with streaming SSR.
8 |
9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/cache/InMemoryCache).
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | declare class InMemoryCache extends InMemoryCache$1
15 | ```
16 | **Extends:** InMemoryCache$1
17 |
18 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.preloadquerycomponent.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [PreloadQueryComponent](./client-integration-nextjs.preloadquerycomponent.md)
4 |
5 | ## PreloadQueryComponent interface
6 |
7 | Preloads data in React Server Components to be hydrated in Client Components.
8 |
9 | \#\#\# Example with `queryRef` `ClientChild` would call `useReadQuery` with the `queryRef`, the `Suspense` boundary is optional:
10 |
11 | ```jsx
12 |
18 | {(queryRef) => (
19 | loading>}>
20 |
21 |
22 | )}
23 |
24 | ```
25 | \#\#\# Example for `useSuspenseQuery` `ClientChild` would call the same query with `useSuspenseQuery`, the `Suspense` boundary is optional:
26 |
27 | ```jsx
28 |
34 | loading>}>
35 |
36 |
37 |
38 | ```
39 |
40 | **Signature:**
41 |
42 | ```typescript
43 | interface PreloadQueryComponent
44 | ```
45 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.preloadqueryprops.children.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [PreloadQueryProps](./client-integration-nextjs.preloadqueryprops.md) > [children](./client-integration-nextjs.preloadqueryprops.children.md)
4 |
5 | ## PreloadQueryProps.children property
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | children: ReactNode | ((queryRef: TransportedQueryRef, NoInfer>) => ReactNode);
11 | ```
12 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.preloadqueryprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [PreloadQueryProps](./client-integration-nextjs.preloadqueryprops.md)
4 |
5 | ## PreloadQueryProps interface
6 |
7 | Props for `PreloadQueryComponent`
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | interface PreloadQueryProps extends PreloadQueryOptions
13 | ```
14 | **Extends:** PreloadQueryOptions<TVariables, TData>
15 |
16 | ## Properties
17 |
18 |
19 |
20 | Property
21 |
22 |
23 |
24 |
25 | Modifiers
26 |
27 |
28 |
29 |
30 | Type
31 |
32 |
33 |
34 |
35 | Description
36 |
37 |
38 |
39 |
40 |
41 | [children](./client-integration-nextjs.preloadqueryprops.children.md)
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | ReactNode \| ((queryRef: [TransportedQueryRef](./client-integration-nextjs.transportedqueryref.md)<NoInfer<TData>, NoInfer<TVariables>>) => ReactNode)
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.removemultipartdirectiveslink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [RemoveMultipartDirectivesLink](./client-integration-nextjs.removemultipartdirectiveslink.md) > [(constructor)](./client-integration-nextjs.removemultipartdirectiveslink._constructor_.md)
4 |
5 | ## RemoveMultipartDirectivesLink.(constructor)
6 |
7 | Constructs a new instance of the `RemoveMultipartDirectivesLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config: RemoveMultipartDirectivesConfig);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | RemoveMultipartDirectivesConfig
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.removemultipartdirectiveslink.request.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [RemoveMultipartDirectivesLink](./client-integration-nextjs.removemultipartdirectiveslink.md) > [request](./client-integration-nextjs.removemultipartdirectiveslink.request.md)
4 |
5 | ## RemoveMultipartDirectivesLink.request() method
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | request(operation: Operation, forward?: NextLink): Observable<{}>;
11 | ```
12 |
13 | ## Parameters
14 |
15 |
16 |
17 | Parameter
18 |
19 |
20 |
21 |
22 | Type
23 |
24 |
25 |
26 |
27 | Description
28 |
29 |
30 |
31 |
32 |
33 | operation
34 |
35 |
36 |
37 |
38 | Operation
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | forward
48 |
49 |
50 |
51 |
52 | NextLink
53 |
54 |
55 |
56 |
57 | _(Optional)_
58 |
59 |
60 |
61 |
62 | **Returns:**
63 |
64 | Observable<{}>
65 |
66 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.resetapolloclientsingletons.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [resetApolloClientSingletons](./client-integration-nextjs.resetapolloclientsingletons.md)
4 |
5 | ## resetApolloClientSingletons variable
6 |
7 | > This export is only available in React Client Components
8 |
9 | Resets the singleton instances created for the Apollo SSR data transport and caches.
10 |
11 | To be used in testing only, like
12 |
13 | ```ts
14 | afterEach(resetApolloClientSingletons);
15 | ```
16 |
17 | **Signature:**
18 |
19 | ```typescript
20 | resetApolloClientSingletons: typeof resetManualSSRApolloSingletons
21 | ```
22 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.ssrmultipartlink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [SSRMultipartLink](./client-integration-nextjs.ssrmultipartlink.md) > [(constructor)](./client-integration-nextjs.ssrmultipartlink._constructor_.md)
4 |
5 | ## SSRMultipartLink.(constructor)
6 |
7 | Constructs a new instance of the `SSRMultipartLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config?: SSRMultipartLinkConfig);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | SSRMultipartLinkConfig
41 |
42 |
43 |
44 |
45 | _(Optional)_
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/docs/client-integration-nextjs.transportedqueryref.topromise.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-nextjs](./client-integration-nextjs.md) > [TransportedQueryRef](./client-integration-nextjs.transportedqueryref.md) > [toPromise](./client-integration-nextjs.transportedqueryref.topromise.md)
4 |
5 | ## TransportedQueryRef.toPromise property
6 |
7 | Temporarily disabled - see https://github.com/apollographql/apollo-client-integrations/issues/332
8 |
9 | Will now be be `undefined` both in React Server Components and Client Components until we can find a better resolution.
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | toPromise?: undefined;
15 | ```
16 |
--------------------------------------------------------------------------------
/docs/client-integration-react-router.apolloclient._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [ApolloClient](./client-integration-react-router.apolloclient.md) > [(constructor)](./client-integration-react-router.apolloclient._constructor_.md)
4 |
5 | ## ApolloClient.(constructor)
6 |
7 | Constructs a new instance of the `ApolloClient` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(options: ConstructorParameters[0]);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | options
36 |
37 |
38 |
39 |
40 | ConstructorParameters<typeof ApolloClient$1>\[0\]
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/docs/client-integration-react-router.apolloclient.setlink.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [ApolloClient](./client-integration-react-router.apolloclient.md) > [setLink](./client-integration-react-router.apolloclient.setlink.md)
4 |
5 | ## ApolloClient.setLink() method
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | setLink(newLink: ApolloLink): void;
11 | ```
12 |
13 | ## Parameters
14 |
15 |
16 |
17 | Parameter
18 |
19 |
20 |
21 |
22 | Type
23 |
24 |
25 |
26 |
27 | Description
28 |
29 |
30 |
31 |
32 |
33 | newLink
34 |
35 |
36 |
37 |
38 | ApolloLink
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | **Returns:**
47 |
48 | void
49 |
50 |
--------------------------------------------------------------------------------
/docs/client-integration-react-router.apollohydrationhelper.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [ApolloHydrationHelper](./client-integration-react-router.apollohydrationhelper.md)
4 |
5 | ## ApolloHydrationHelper() function
6 |
7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8 | >
9 |
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | declare function ApolloHydrationHelper(props: {
15 | children: React.ReactNode;
16 | }): React.ReactNode;
17 | ```
18 |
19 | ## Parameters
20 |
21 |
22 |
23 | Parameter
24 |
25 |
26 |
27 |
28 | Type
29 |
30 |
31 |
32 |
33 | Description
34 |
35 |
36 |
37 |
38 |
39 | props
40 |
41 |
42 |
43 |
44 | { children: React.ReactNode; }
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | **Returns:**
53 |
54 | React.ReactNode
55 |
56 |
--------------------------------------------------------------------------------
/docs/client-integration-react-router.createapolloloaderhandler.apolloloader.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [createApolloLoaderHandler](./client-integration-react-router.createapolloloaderhandler.md) > [ApolloLoader](./client-integration-react-router.createapolloloaderhandler.apolloloader.md)
4 |
5 | ## createApolloLoaderHandler.ApolloLoader type
6 |
7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8 | >
9 |
10 | **Signature:**
11 |
12 | ```typescript
13 | type ApolloLoader = >() => (loader: (args: LoaderArgs & {
14 | preloadQuery: PreloadQueryFn;
15 | }) => ReturnValue) => (args: LoaderArgs) => ReturnValue;
16 | ```
17 | **References:** [PreloadQueryFn](./client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md)
18 |
19 |
--------------------------------------------------------------------------------
/docs/client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-react-router](./client-integration-react-router.md) > [createApolloLoaderHandler](./client-integration-react-router.createapolloloaderhandler.md) > [PreloadQueryFn](./client-integration-react-router.createapolloloaderhandler.preloadqueryfn.md)
4 |
5 | ## createApolloLoaderHandler.PreloadQueryFn interface
6 |
7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8 | >
9 |
10 | **Signature:**
11 |
12 | ```typescript
13 | interface PreloadQueryFn
14 | ```
15 |
--------------------------------------------------------------------------------
/docs/client-integration-tanstack-start.apolloclient.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [ApolloClient](./client-integration-tanstack-start.apolloclient.md)
4 |
5 | ## ApolloClient class
6 |
7 | A version of `ApolloClient` to be used with TanStack Start.
8 |
9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient).
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | declare class ApolloClient extends ApolloClient$1
15 | ```
16 | **Extends:** ApolloClient$1<TCacheShape>
17 |
18 |
--------------------------------------------------------------------------------
/docs/client-integration-tanstack-start.apolloclientroutercontext.apolloclient.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [ApolloClientRouterContext](./client-integration-tanstack-start.apolloclientroutercontext.md) > [apolloClient](./client-integration-tanstack-start.apolloclientroutercontext.apolloclient.md)
4 |
5 | ## ApolloClientRouterContext.apolloClient property
6 |
7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8 | >
9 |
10 | **Signature:**
11 |
12 | ```typescript
13 | apolloClient: ApolloClient$1;
14 | ```
15 |
--------------------------------------------------------------------------------
/docs/client-integration-tanstack-start.apolloclientroutercontext.preloadquery.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [ApolloClientRouterContext](./client-integration-tanstack-start.apolloclientroutercontext.md) > [preloadQuery](./client-integration-tanstack-start.apolloclientroutercontext.preloadquery.md)
4 |
5 | ## ApolloClientRouterContext.preloadQuery property
6 |
7 | > This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
8 | >
9 |
10 | **Signature:**
11 |
12 | ```typescript
13 | preloadQuery: PreloadQueryFunction;
14 | ```
15 |
--------------------------------------------------------------------------------
/docs/client-integration-tanstack-start.inmemorycache.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-integration-tanstack-start](./client-integration-tanstack-start.md) > [InMemoryCache](./client-integration-tanstack-start.inmemorycache.md)
4 |
5 | ## InMemoryCache class
6 |
7 | A version of `InMemoryCache` to be used with TanStack Start.
8 |
9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/cache/InMemoryCache).
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | declare class InMemoryCache extends InMemoryCache$1
15 | ```
16 | **Extends:** InMemoryCache$1
17 |
18 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.apolloclient.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [ApolloClient](./client-react-streaming.apolloclient.md)
4 |
5 | ## ApolloClient class
6 |
7 | A version of `ApolloClient` to be used with streaming SSR or in React Server Components.
8 |
9 | For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient).
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | declare class ApolloClient extends ApolloClient_base implements Partial
15 | ```
16 | **Extends:** ApolloClient\_base
17 |
18 | **Implements:** Partial<ApolloClientSSRImpl>
19 |
20 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.createtransportedquerypreloader.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [createTransportedQueryPreloader](./client-react-streaming.createtransportedquerypreloader.md)
4 |
5 | ## createTransportedQueryPreloader() function
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | declare function createTransportedQueryPreloader(client: ApolloClient$1): PreloadTransportedQueryFunction;
12 | ```
13 |
14 | ## Parameters
15 |
16 |
17 |
18 | Parameter
19 |
20 |
21 |
22 |
23 | Type
24 |
25 |
26 |
27 |
28 | Description
29 |
30 |
31 |
32 |
33 |
34 | client
35 |
36 |
37 |
38 |
39 | ApolloClient$1<any>
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | **Returns:**
48 |
49 | [PreloadTransportedQueryFunction](./client-react-streaming.preloadtransportedqueryfunction.md)
50 |
51 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.datatransportcontext.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [DataTransportContext](./client-react-streaming.datatransportcontext.md)
4 |
5 | ## DataTransportContext variable
6 |
7 | > This export is only available in React Client Components
8 |
9 | If you create a custom data transport, you need to wrap the child tree in a `DataTransportContext.Provider` and provide the `DataTransportAbstraction` to it.
10 |
11 | See for example https://github.com/apollographql/apollo-client-integrations/blob/37feeaa9aea69b90a974eb9cd0fbd636b62d841a/integration-test/experimental-react/src/WrappedApolloProvider.tsx
12 |
13 | **Signature:**
14 |
15 | ```typescript
16 | DataTransportContext: React.Context
17 | ```
18 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.debouncemultipartresponseslink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [DebounceMultipartResponsesLink](./client-react-streaming.debouncemultipartresponseslink.md) > [(constructor)](./client-react-streaming.debouncemultipartresponseslink._constructor_.md)
4 |
5 | ## DebounceMultipartResponsesLink.(constructor)
6 |
7 | Constructs a new instance of the `AccumulateMultipartResponsesLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config: AccumulateMultipartResponsesConfig);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | AccumulateMultipartResponsesConfig
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.debouncemultipartresponseslink.request.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [DebounceMultipartResponsesLink](./client-react-streaming.debouncemultipartresponseslink.md) > [request](./client-react-streaming.debouncemultipartresponseslink.request.md)
4 |
5 | ## DebounceMultipartResponsesLink.request() method
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | request(operation: Operation, forward?: NextLink): Observable, Record, Record>>;
11 | ```
12 |
13 | ## Parameters
14 |
15 |
16 |
17 | Parameter
18 |
19 |
20 |
21 |
22 | Type
23 |
24 |
25 |
26 |
27 | Description
28 |
29 |
30 |
31 |
32 |
33 | operation
34 |
35 |
36 |
37 |
38 | Operation
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | forward
48 |
49 |
50 |
51 |
52 | NextLink
53 |
54 |
55 |
56 |
57 | _(Optional)_
58 |
59 |
60 |
61 |
62 | **Returns:**
63 |
64 | Observable<FetchResult<Record<string, any>, Record<string, any>, Record<string, any>>>
65 |
66 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.hydrationcontextoptions.extrascriptprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [HydrationContextOptions](./client-react-streaming.hydrationcontextoptions.md) > [extraScriptProps](./client-react-streaming.hydrationcontextoptions.extrascriptprops.md)
4 |
5 | ## HydrationContextOptions.extraScriptProps property
6 |
7 | Props that will be passed down to `script` tags that will be used to transport data to the browser. Can e.g. be used to add a `nonce`.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | extraScriptProps?: ScriptProps;
13 | ```
14 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.hydrationcontextoptions.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [HydrationContextOptions](./client-react-streaming.hydrationcontextoptions.md)
4 |
5 | ## HydrationContextOptions interface
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | interface HydrationContextOptions
12 | ```
13 |
14 | ## Properties
15 |
16 |
17 |
18 | Property
19 |
20 |
21 |
22 |
23 | Modifiers
24 |
25 |
26 |
27 |
28 | Type
29 |
30 |
31 |
32 |
33 | Description
34 |
35 |
36 |
37 |
38 |
39 | [extraScriptProps?](./client-react-streaming.hydrationcontextoptions.extrascriptprops.md)
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | ScriptProps
48 |
49 |
50 |
51 |
52 | _(Optional)_ Props that will be passed down to `script` tags that will be used to transport data to the browser. Can e.g. be used to add a `nonce`.
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.inmemorycache._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [InMemoryCache](./client-react-streaming.inmemorycache.md) > [(constructor)](./client-react-streaming.inmemorycache._constructor_.md)
4 |
5 | ## InMemoryCache.(constructor)
6 |
7 | Constructs a new instance of the `InMemoryCache` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config?: InMemoryCacheConfig | undefined);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | InMemoryCacheConfig \| undefined
41 |
42 |
43 |
44 |
45 | _(Optional)_
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.inmemorycache._sourcesymbol_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [InMemoryCache](./client-react-streaming.inmemorycache.md) > [\[sourceSymbol\]](./client-react-streaming.inmemorycache._sourcesymbol_.md)
4 |
5 | ## InMemoryCache.\[sourceSymbol\] property
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | [sourceSymbol]: string;
11 | ```
12 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.istransportedqueryref.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [isTransportedQueryRef](./client-react-streaming.istransportedqueryref.md)
4 |
5 | ## isTransportedQueryRef() function
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | declare function isTransportedQueryRef(queryRef: any): queryRef is TransportedQueryRef;
12 | ```
13 |
14 | ## Parameters
15 |
16 |
17 |
18 | Parameter
19 |
20 |
21 |
22 |
23 | Type
24 |
25 |
26 |
27 |
28 | Description
29 |
30 |
31 |
32 |
33 |
34 | queryRef
35 |
36 |
37 |
38 |
39 | any
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | **Returns:**
48 |
49 | queryRef is [TransportedQueryRef](./client-react-streaming.transportedqueryref.md)
50 |
51 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.preloadquerycomponent.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadQueryComponent](./client-react-streaming.preloadquerycomponent.md)
4 |
5 | ## PreloadQueryComponent interface
6 |
7 | Preloads data in React Server Components to be hydrated in Client Components.
8 |
9 | \#\#\# Example with `queryRef` `ClientChild` would call `useReadQuery` with the `queryRef`, the `Suspense` boundary is optional:
10 |
11 | ```jsx
12 |
18 | {(queryRef) => (
19 | loading>}>
20 |
21 |
22 | )}
23 |
24 | ```
25 | \#\#\# Example for `useSuspenseQuery` `ClientChild` would call the same query with `useSuspenseQuery`, the `Suspense` boundary is optional:
26 |
27 | ```jsx
28 |
34 | loading>}>
35 |
36 |
37 |
38 | ```
39 |
40 | **Signature:**
41 |
42 | ```typescript
43 | interface PreloadQueryComponent
44 | ```
45 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.preloadqueryprops.children.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadQueryProps](./client-react-streaming.preloadqueryprops.md) > [children](./client-react-streaming.preloadqueryprops.children.md)
4 |
5 | ## PreloadQueryProps.children property
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | children: ReactNode | ((queryRef: TransportedQueryRef, NoInfer>) => ReactNode);
11 | ```
12 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.preloadqueryprops.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadQueryProps](./client-react-streaming.preloadqueryprops.md)
4 |
5 | ## PreloadQueryProps interface
6 |
7 | Props for `PreloadQueryComponent`
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | interface PreloadQueryProps extends PreloadQueryOptions
13 | ```
14 | **Extends:** PreloadQueryOptions<TVariables, TData>
15 |
16 | ## Properties
17 |
18 |
19 |
20 | Property
21 |
22 |
23 |
24 |
25 | Modifiers
26 |
27 |
28 |
29 |
30 | Type
31 |
32 |
33 |
34 |
35 | Description
36 |
37 |
38 |
39 |
40 |
41 | [children](./client-react-streaming.preloadqueryprops.children.md)
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | ReactNode \| ((queryRef: [TransportedQueryRef](./client-react-streaming.transportedqueryref.md)<NoInfer<TData>, NoInfer<TVariables>>) => ReactNode)
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.preloadtransportedqueryfunction.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadTransportedQueryFunction](./client-react-streaming.preloadtransportedqueryfunction.md)
4 |
5 | ## PreloadTransportedQueryFunction interface
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | interface PreloadTransportedQueryFunction
12 | ```
13 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.preloadtransportedqueryoptions.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [PreloadTransportedQueryOptions](./client-react-streaming.preloadtransportedqueryoptions.md)
4 |
5 | ## PreloadTransportedQueryOptions type
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | type PreloadTransportedQueryOptions = Omit, "query"> & RestrictedPreloadOptions;
12 | ```
13 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.queryevent.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [QueryEvent](./client-react-streaming.queryevent.md)
4 |
5 | ## QueryEvent type
6 |
7 | Events that will be emitted by a wrapped ApolloClient instance during SSR on `DataTransportProviderImplementation.registerDispatchRequestStarted`, to be transported to the browser and replayed there using `DataTransportProviderImplementation.onQueryEvent`.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | type QueryEvent = {
13 | type: "started";
14 | options: TransportedOptions;
15 | id: TransportIdentifier;
16 | } | (ReadableStreamLinkEvent & {
17 | id: TransportIdentifier;
18 | });
19 | ```
20 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.readfromreadablestream.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [readFromReadableStream](./client-react-streaming.readfromreadablestream.md)
4 |
5 | ## readFromReadableStream() function
6 |
7 | Apply to a context that will be passed to a link chain containing `ReadFromReadableStreamLink`.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | declare function readFromReadableStream>(readableStream: ReadableStream, context: T): T & InternalContext$1;
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | readableStream
36 |
37 |
38 |
39 |
40 | ReadableStream<ReadableStreamLinkEvent>
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | context
50 |
51 |
52 |
53 |
54 | T
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | **Returns:**
63 |
64 | T & InternalContext$1
65 |
66 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.readfromreadablestreamlink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [ReadFromReadableStreamLink](./client-react-streaming.readfromreadablestreamlink.md) > [(constructor)](./client-react-streaming.readfromreadablestreamlink._constructor_.md)
4 |
5 | ## ReadFromReadableStreamLink.(constructor)
6 |
7 | Constructs a new instance of the `ReadFromReadableStreamLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor();
13 | ```
14 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.readfromreadablestreamlink.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [ReadFromReadableStreamLink](./client-react-streaming.readfromreadablestreamlink.md)
4 |
5 | ## ReadFromReadableStreamLink class
6 |
7 | A link that allows the response to be read from a readable stream, e.g. for hydration of a multipart response from RSC or a server loader in the browser.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | declare class ReadFromReadableStreamLink extends ApolloLink
13 | ```
14 | **Extends:** ApolloLink
15 |
16 | ## Constructors
17 |
18 |
19 |
20 | Constructor
21 |
22 |
23 |
24 |
25 | Modifiers
26 |
27 |
28 |
29 |
30 | Description
31 |
32 |
33 |
34 |
35 |
36 | [(constructor)()](./client-react-streaming.readfromreadablestreamlink._constructor_.md)
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | Constructs a new instance of the `ReadFromReadableStreamLink` class
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.removemultipartdirectiveslink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [RemoveMultipartDirectivesLink](./client-react-streaming.removemultipartdirectiveslink.md) > [(constructor)](./client-react-streaming.removemultipartdirectiveslink._constructor_.md)
4 |
5 | ## RemoveMultipartDirectivesLink.(constructor)
6 |
7 | Constructs a new instance of the `RemoveMultipartDirectivesLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config: RemoveMultipartDirectivesConfig);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | RemoveMultipartDirectivesConfig
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.removemultipartdirectiveslink.request.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [RemoveMultipartDirectivesLink](./client-react-streaming.removemultipartdirectiveslink.md) > [request](./client-react-streaming.removemultipartdirectiveslink.request.md)
4 |
5 | ## RemoveMultipartDirectivesLink.request() method
6 |
7 | **Signature:**
8 |
9 | ```typescript
10 | request(operation: Operation, forward?: NextLink): Observable<{}>;
11 | ```
12 |
13 | ## Parameters
14 |
15 |
16 |
17 | Parameter
18 |
19 |
20 |
21 |
22 | Type
23 |
24 |
25 |
26 |
27 | Description
28 |
29 |
30 |
31 |
32 |
33 | operation
34 |
35 |
36 |
37 |
38 | Operation
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | forward
48 |
49 |
50 |
51 |
52 | NextLink
53 |
54 |
55 |
56 |
57 | _(Optional)_
58 |
59 |
60 |
61 |
62 | **Returns:**
63 |
64 | Observable<{}>
65 |
66 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.resetapollosingletons.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [resetApolloSingletons](./client-react-streaming.resetapollosingletons.md)
4 |
5 | ## resetApolloSingletons() function
6 |
7 | > This export is only available in React Client Components
8 |
9 | Resets the singleton instances created for the Apollo SSR data transport and caches.
10 |
11 | To be used in testing only, like
12 |
13 | ```ts
14 | afterEach(resetApolloSingletons);
15 | ```
16 |
17 | **Signature:**
18 |
19 | ```typescript
20 | declare function resetApolloSingletons(): void;
21 | ```
22 | **Returns:**
23 |
24 | void
25 |
26 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.resetmanualssrapollosingletons.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [resetManualSSRApolloSingletons](./client-react-streaming.resetmanualssrapollosingletons.md)
4 |
5 | ## resetManualSSRApolloSingletons() function
6 |
7 | > This export is only available in React Client Components
8 |
9 | Resets the singleton instances created for the Apollo SSR data transport and caches.
10 |
11 | To be used in testing only, like
12 |
13 | ```ts
14 | afterEach(resetManualSSRApolloSingletons);
15 | ```
16 |
17 | **Signature:**
18 |
19 | ```typescript
20 | declare function resetManualSSRApolloSingletons(): void;
21 | ```
22 | **Returns:**
23 |
24 | void
25 |
26 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.revivetransportedqueryref.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [reviveTransportedQueryRef](./client-react-streaming.revivetransportedqueryref.md)
4 |
5 | ## reviveTransportedQueryRef() function
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | declare function reviveTransportedQueryRef(queryRef: TransportedQueryRef, client: ApolloClient$1): asserts queryRef is TransportedQueryRef & ReturnType>;
12 | ```
13 |
14 | ## Parameters
15 |
16 |
17 |
18 | Parameter
19 |
20 |
21 |
22 |
23 | Type
24 |
25 |
26 |
27 |
28 | Description
29 |
30 |
31 |
32 |
33 |
34 | queryRef
35 |
36 |
37 |
38 |
39 | [TransportedQueryRef](./client-react-streaming.transportedqueryref.md)
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | client
49 |
50 |
51 |
52 |
53 | ApolloClient$1<any>
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | **Returns:**
62 |
63 | asserts queryRef is [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) & ReturnType<typeof wrapQueryRef<any, any>>
64 |
65 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.skipdatatransport.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [skipDataTransport](./client-react-streaming.skipdatatransport.md)
4 |
5 | ## skipDataTransport() function
6 |
7 | Apply to a context to prevent this operation from being transported over the SSR data transport mechanism.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | declare function skipDataTransport>(context: T): T & InternalContext;
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | context
36 |
37 |
38 |
39 |
40 | T
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | **Returns:**
49 |
50 | T & InternalContext
51 |
52 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.ssrmultipartlink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [SSRMultipartLink](./client-react-streaming.ssrmultipartlink.md) > [(constructor)](./client-react-streaming.ssrmultipartlink._constructor_.md)
4 |
5 | ## SSRMultipartLink.(constructor)
6 |
7 | Constructs a new instance of the `SSRMultipartLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor(config?: SSRMultipartLinkConfig);
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | config
36 |
37 |
38 |
39 |
40 | SSRMultipartLinkConfig
41 |
42 |
43 |
44 |
45 | _(Optional)_
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.teetoreadablestream.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [teeToReadableStream](./client-react-streaming.teetoreadablestream.md)
4 |
5 | ## teeToReadableStream() function
6 |
7 | Apply to a context that will be passed to a link chain containing `TeeToReadableStreamLink`.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | declare function teeToReadableStream>(onLinkHit: OnLinkHitFunction, context: T): T & InternalContext$1;
13 | ```
14 |
15 | ## Parameters
16 |
17 |
18 |
19 | Parameter
20 |
21 |
22 |
23 |
24 | Type
25 |
26 |
27 |
28 |
29 | Description
30 |
31 |
32 |
33 |
34 |
35 | onLinkHit
36 |
37 |
38 |
39 |
40 | OnLinkHitFunction
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | context
50 |
51 |
52 |
53 |
54 | T
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | **Returns:**
63 |
64 | T & InternalContext$1
65 |
66 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.teetoreadablestreamlink._constructor_.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [TeeToReadableStreamLink](./client-react-streaming.teetoreadablestreamlink.md) > [(constructor)](./client-react-streaming.teetoreadablestreamlink._constructor_.md)
4 |
5 | ## TeeToReadableStreamLink.(constructor)
6 |
7 | Constructs a new instance of the `TeeToReadableStreamLink` class
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | constructor();
13 | ```
14 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.teetoreadablestreamlink.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [TeeToReadableStreamLink](./client-react-streaming.teetoreadablestreamlink.md)
4 |
5 | ## TeeToReadableStreamLink class
6 |
7 | A link that allows the request to be cloned into a readable stream, e.g. for transport of multipart responses from RSC or a server loader to the browser.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | declare class TeeToReadableStreamLink extends ApolloLink
13 | ```
14 | **Extends:** ApolloLink
15 |
16 | ## Constructors
17 |
18 |
19 |
20 | Constructor
21 |
22 |
23 |
24 |
25 | Modifiers
26 |
27 |
28 |
29 |
30 | Description
31 |
32 |
33 |
34 |
35 |
36 | [(constructor)()](./client-react-streaming.teetoreadablestreamlink._constructor_.md)
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | Constructs a new instance of the `TeeToReadableStreamLink` class
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.transportedqueryref.topromise.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [TransportedQueryRef](./client-react-streaming.transportedqueryref.md) > [toPromise](./client-react-streaming.transportedqueryref.topromise.md)
4 |
5 | ## TransportedQueryRef.toPromise property
6 |
7 | Temporarily disabled - see https://github.com/apollographql/apollo-client-integrations/issues/332
8 |
9 | Will now be be `undefined` both in React Server Components and Client Components until we can find a better resolution.
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | toPromise?: undefined;
15 | ```
16 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.usewraptransportedqueryref.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [useWrapTransportedQueryRef](./client-react-streaming.usewraptransportedqueryref.md)
4 |
5 | ## useWrapTransportedQueryRef() function
6 |
7 |
8 | **Signature:**
9 |
10 | ```typescript
11 | declare function useWrapTransportedQueryRef(queryRef: QueryRef | TransportedQueryRef): QueryRef;
12 | ```
13 |
14 | ## Parameters
15 |
16 |
17 |
18 | Parameter
19 |
20 |
21 |
22 |
23 | Type
24 |
25 |
26 |
27 |
28 | Description
29 |
30 |
31 |
32 |
33 |
34 | queryRef
35 |
36 |
37 |
38 |
39 | QueryRef<TData, TVariables> \| [TransportedQueryRef](./client-react-streaming.transportedqueryref.md)
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | **Returns:**
48 |
49 | QueryRef<TData, TVariables>
50 |
51 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.wrappedapolloprovider.info.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [WrappedApolloProvider](./client-react-streaming.wrappedapolloprovider.md) > [info](./client-react-streaming.wrappedapolloprovider.info.md)
4 |
5 | ## WrappedApolloProvider.info property
6 |
7 | Information about the current package and it's export names, for use in error messages.
8 |
9 | **Signature:**
10 |
11 | ```typescript
12 | info: {
13 | pkg: string;
14 | };
15 | ```
16 |
--------------------------------------------------------------------------------
/docs/client-react-streaming.wrappedapolloprovider.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | [Home](./index.md) > [@apollo/client-react-streaming](./client-react-streaming.md) > [WrappedApolloProvider](./client-react-streaming.wrappedapolloprovider.md)
4 |
5 | ## WrappedApolloProvider interface
6 |
7 | > This is only available in React Client Components
8 |
9 | A version of `ApolloProvider` particularly suited for React's streaming SSR.
10 |
11 | **Signature:**
12 |
13 | ```typescript
14 | interface WrappedApolloProvider
15 | ```
16 |
17 | ## Properties
18 |
19 |
20 |
21 | Property
22 |
23 |
24 |
25 |
26 | Modifiers
27 |
28 |
29 |
30 |
31 | Type
32 |
33 |
34 |
35 |
36 | Description
37 |
38 |
39 |
40 |
41 |
42 | [info](./client-react-streaming.wrappedapolloprovider.info.md)
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | { pkg: string; }
51 |
52 |
53 |
54 |
55 | Information about the current package and it's export names, for use in error messages.
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # Example Apps
2 |
3 | Just a quick explainer:
4 |
5 | - [./hack-the-supergraph-ssr](./hack-the-supergraph-ssr) is a simple app that is based on the [hack the supergraph demo app](https://github.com/apollographql/hack-the-supergraph) app.
6 | It only showcases SSR cases, but it's a good starting point for understanding how to use the library.
7 | - [./app-dir-experiments/](./app-dir-experiments) is an app we use to internally do experiments. It's not really an example app, but if you just want to play around, go ahead.
8 | - [./polls-demo](./polls-demo/) is a simple poll app that showcases both Server Components and Client Components in a single app.
9 | It show the difference between using Apollo Client in Server Components and Client Components.
10 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "../../node_modules/typescript/lib",
3 | "typescript.enablePromptUseWorkspaceTsdk": true
4 | }
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/ApolloClient.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
2 | import { registerApolloClient } from "@apollo/client-integration-nextjs/rsc";
3 |
4 | export const { getClient } = registerApolloClient(() => {
5 | return new ApolloClient({
6 | cache: new InMemoryCache(),
7 | link: new HttpLink({
8 | uri: "http://localhost:3000/api/graphql",
9 | // you can disable result caching here if you want to
10 | // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
11 | // fetchOptions: { cache: "no-store" },
12 | }),
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/api/graphql/route.ts:
--------------------------------------------------------------------------------
1 | import { startServerAndCreateNextHandler } from "@as-integrations/next";
2 | import { ApolloServer } from "@apollo/server";
3 | import { gql } from "graphql-tag";
4 |
5 | const typeDefs = gql`
6 | type User {
7 | id: String!
8 | name: String!
9 | }
10 | type Post {
11 | id: String!
12 | title: String!
13 | }
14 | type Query {
15 | getUser(id: String!): User
16 | getPosts: [Post!]!
17 | }
18 | `;
19 |
20 | const resolvers = {
21 | Query: {
22 | getUser: async () =>
23 | new Promise((resolve) => {
24 | setTimeout(() => resolve({ id: "1", name: "John" }), 1000);
25 | }),
26 | getPosts: async () =>
27 | new Promise((resolve) => {
28 | setTimeout(
29 | () =>
30 | resolve([
31 | { id: "1", title: "Post 1" },
32 | { id: "2", title: "Post 2" },
33 | ]),
34 | 3500
35 | );
36 | }),
37 | },
38 | };
39 |
40 | const server = new ApolloServer({
41 | resolvers,
42 | typeDefs,
43 | });
44 |
45 | const handler = startServerAndCreateNextHandler(server);
46 |
47 | export async function GET(request: Request) {
48 | return handler(request);
49 | }
50 |
51 | export async function POST(request: Request) {
52 | return handler(request);
53 | }
54 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/apollo-client-integrations/c465affd9e31674e868cdc7ac90cf0cab4c7f70e/examples/app-dir-experiments/app/favicon.ico
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 |
3 | export const metadata = {
4 | title: "Create Next App",
5 | description: "Generated by create next app",
6 | };
7 |
8 | export default function RootLayout({
9 | children,
10 | }: {
11 | children: React.ReactNode;
12 | }) {
13 | return (
14 |
15 | {children}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { gql } from "@apollo/client";
2 | import { getClient } from "./ApolloClient";
3 | import Link from "next/link";
4 |
5 | export const dynamic = "force-dynamic";
6 | // 'auto' | 'force-dynamic' | 'error' | 'force-static'
7 |
8 | const userQuery = gql`
9 | query {
10 | getUser(id: "1") {
11 | id
12 | name
13 | }
14 | }
15 | `;
16 |
17 | export default async function Home() {
18 | const { data } = await getClient().query({ query: userQuery });
19 |
20 | return (
21 |
22 |
data received during RSC render: {JSON.stringify(data)}
23 |
24 | SSR examples are here
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ApolloLink, HttpLink } from "@apollo/client";
4 | import {
5 | ApolloNextAppProvider,
6 | InMemoryCache,
7 | ApolloClient,
8 | SSRMultipartLink,
9 | } from "@apollo/client-integration-nextjs";
10 | import { setVerbosity } from "ts-invariant";
11 |
12 | setVerbosity("debug");
13 |
14 | function makeClient() {
15 | const httpLink = new HttpLink({
16 | uri: "http://localhost:3000/api/graphql",
17 | fetchOptions: { cache: "no-store" },
18 | });
19 |
20 | return new ApolloClient({
21 | cache: new InMemoryCache(),
22 | link:
23 | typeof window === "undefined"
24 | ? ApolloLink.from([
25 | new SSRMultipartLink({
26 | stripDefer: true,
27 | }),
28 | httpLink,
29 | ])
30 | : httpLink,
31 | });
32 | }
33 |
34 | export function ApolloWrapper({ children }: React.PropsWithChildren) {
35 | return (
36 |
37 | {children}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/app/ssr/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "./ApolloWrapper";
2 | export default function Layout({ children }: React.PropsWithChildren) {
3 | return {children} ;
4 | }
5 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | module.exports = nextConfig;
5 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app-dir",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "prebuild": "yarn workspace @apollo/client-integration-nextjs run build",
8 | "build": "next build",
9 | "start": "next start",
10 | "lint": "next lint"
11 | },
12 | "dependencies": {
13 | "@apollo/client": "^3.13.4",
14 | "@apollo/client-integration-nextjs": "workspace:^",
15 | "@apollo/server": "^4.9.5",
16 | "@as-integrations/next": "^3.0.0",
17 | "@types/node": "20.12.11",
18 | "@types/react": "^19.0.0",
19 | "@types/react-dom": "^19.0.0",
20 | "client-only": "^0.0.1",
21 | "encoding": "^0.1.13",
22 | "eslint": "8.36.0",
23 | "eslint-config-next": "13.2.4",
24 | "graphql": "^16.6.0",
25 | "html-differ": "^1.4.0",
26 | "next": "^15.2.4",
27 | "react": "^19.0.0",
28 | "react-dom": "^19.0.0",
29 | "server-only": "^0.0.1",
30 | "typescript": "^5.7.3"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/public/thirteen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/app-dir-experiments/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/README.md:
--------------------------------------------------------------------------------
1 | This is based on the [Hack the supergraph demo app](https://github.com/apollographql/hack-the-supergraph)
2 |
3 | You can change the delay for deferred fragments using the "Demo Settings" button in the top right.
4 | As we are dealing with a real network connection, the _real_ delay will be a little longer than what you set here.
5 | The app is configured so that all fragments arriving within the first 100ms will still be part of SSR, and all fragments that take longer than 100ms will be fetched on the client.
6 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/app/ClientLayout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | // chakra makes this a client component
3 |
4 | import { ChakraProvider, Container } from "@chakra-ui/react";
5 | import Spinner from "@/components/Spinner";
6 | import { Suspense } from "react";
7 | import theme from "@/theme";
8 | import { CacheProvider } from "@chakra-ui/next-js";
9 | import Nav from "@/components/Nav";
10 | export function ClientLayout({ children }: React.PropsWithChildren) {
11 | return (
12 |
13 |
14 |
15 |
16 | }>{children}
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/app/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { Box, Heading, Text, VStack } from "@chakra-ui/react";
5 |
6 | export const Error = ({
7 | error,
8 | reset,
9 | }: {
10 | error: Error;
11 | reset: () => void;
12 | }) => (
13 |
14 |
15 | Houston, something went wrong on our end
16 | Please review the information below for more details.
17 |
18 | {error && (
19 |
26 | Error: {error.message}
27 |
28 | )}
29 |
30 | );
31 |
32 | export default Error;
33 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import { cookies } from "next/headers";
2 | import { ClientLayout } from "./ClientLayout";
3 |
4 | import { ApolloWrapper } from "./ApolloWrapper";
5 |
6 | export default async function RootLayout({
7 | children,
8 | }: {
9 | children: React.ReactNode;
10 | }) {
11 | const cookieStore = await cookies();
12 | const delay = Number(cookieStore.get("apollo-x-custom-delay")?.value ?? 1000);
13 |
14 | return (
15 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/app/not-found.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Button from "../components/Button";
4 | import React from "react";
5 | import Error from "./error";
6 | import Link from "next/link";
7 |
8 | export const Fallback = () => (
9 |
10 |
11 | Home
12 |
13 |
14 | );
15 |
16 | export default Fallback;
17 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/components/Button.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@chakra-ui/react";
2 |
3 | const ThemeButton = ({
4 | children,
5 | ...props
6 | }: React.ComponentProps) => (
7 |
15 | {children}
16 |
17 | );
18 |
19 | export default ThemeButton;
20 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/components/DelaySlider.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Heading,
4 | Slider,
5 | SliderFilledTrack,
6 | SliderThumb,
7 | SliderTrack,
8 | } from "@chakra-ui/react";
9 | import { useEffect, useState } from "react";
10 | import clientCookies from "js-cookie";
11 |
12 | export default function DelaySlider() {
13 | const [delay, setDelay] = useState(
14 | typeof window === "undefined"
15 | ? 1000
16 | : Number(clientCookies.get("apollo-x-custom-delay") ?? 1000)
17 | );
18 |
19 | useEffect(() => {
20 | if (delay) clientCookies.set("apollo-x-custom-delay", String(delay));
21 | }, [delay]);
22 |
23 | return (
24 |
25 |
26 | Custom @defer
Delay: {delay}ms
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/components/Nav.tsx:
--------------------------------------------------------------------------------
1 | import SettingsModal from "./SettingsModal";
2 | import { Box, Flex } from "@chakra-ui/react";
3 | import Link from "next/link";
4 | import { Logo } from "./Logo";
5 |
6 | export default function Nav() {
7 | return (
8 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/components/ReviewRating.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @ts-ignore
3 | import ReactStars from "react-rating-stars-component";
4 | import theme from "../theme.js";
5 | import { IoStar, IoStarHalf, IoStarOutline } from "react-icons/io5";
6 |
7 | // https://www.npmjs.com/package/react-rating-stars-component
8 |
9 | export default function ReviewRating({
10 | edit = false,
11 | isHalf = false,
12 | rating = 0,
13 | setReviewsInput = () => {},
14 | size = 32,
15 | isLight = false,
16 | }) {
17 | const color = isLight ? theme.colors.brand.white : theme.colors.brand.black;
18 | const starConfig = {
19 | size,
20 | isHalf,
21 | color,
22 | activeColor: color,
23 | emptyIcon: ,
24 | halfIcon: ,
25 | filledIcon: ,
26 | };
27 |
28 | return (
29 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/components/SettingsModal.tsx:
--------------------------------------------------------------------------------
1 | import DelaySlider from "./DelaySlider";
2 | import {
3 | Button,
4 | Modal,
5 | ModalBody,
6 | ModalCloseButton,
7 | ModalContent,
8 | ModalHeader,
9 | ModalOverlay,
10 | } from "@chakra-ui/react";
11 | import { useState } from "react";
12 |
13 | export default function SettingsModal() {
14 | const [isOpen, setIsOpen] = useState(false);
15 | return (
16 | <>
17 | setIsOpen(true)}>Demo Settings
18 | setIsOpen(false)}>
19 |
20 |
21 | Demo Settings
22 |
23 |
24 |
25 |
26 |
27 |
28 | >
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/components/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Center, Spinner } from "@chakra-ui/react";
3 |
4 | export default function LoadingSpinner() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | module.exports = nextConfig;
5 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hack-the-supergraph-ssr",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "prebuild": "yarn workspace @apollo/client-integration-nextjs run build",
8 | "build": "next build",
9 | "start": "next start",
10 | "lint": "next lint"
11 | },
12 | "dependencies": {
13 | "@apollo/client": "^3.13.4",
14 | "@apollo/client-integration-nextjs": "workspace:^",
15 | "@apollo/space-kit": "^9.11.0",
16 | "@chakra-ui/next-js": "2.4.2",
17 | "@chakra-ui/react": "^2.5.5",
18 | "@emotion/cache": "^11.11.0",
19 | "@emotion/core": "^11.0.0",
20 | "@emotion/react": "^11.10.6",
21 | "@emotion/styled": "^11.10.6",
22 | "@types/node": "20.12.11",
23 | "@types/react": "^19.0.0",
24 | "@types/react-dom": "^19.0.0",
25 | "eslint": "8.38.0",
26 | "eslint-config-next": "13.3.0",
27 | "framer-motion": "^10.12.2",
28 | "graphql": "^16.6.0",
29 | "js-cookie": "^3.0.1",
30 | "next": "^15.2.4",
31 | "react": "^19.0.0",
32 | "react-dom": "^19.0.0",
33 | "react-icons": "^4.8.0",
34 | "react-rating-stars-component": "^2.2.0",
35 | "typescript": "^5.7.3"
36 | },
37 | "devDependencies": {
38 | "@types/js-cookie": "3.0.6"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/theme.js:
--------------------------------------------------------------------------------
1 | import "@apollo/space-kit/reset.css";
2 | import { extendTheme } from "@chakra-ui/react";
3 |
4 | export default extendTheme({
5 | colors: {
6 | brand: {
7 | black: "#12151A",
8 | white: "#FCFDFF",
9 | light: "#DEE2E7",
10 | 100: "#D9CFFF",
11 | 200: "#AD9BF6",
12 | 300: "#7156D9",
13 | 400: "#3F20BA",
14 | midnight: "#1B2240",
15 | error: "#9C2323",
16 | },
17 | },
18 | fonts: {
19 | heading: "'Source Sans Pro', sans-serif",
20 | body: "'Source Sans Pro', sans-serif",
21 | },
22 | });
23 |
--------------------------------------------------------------------------------
/examples/hack-the-supergraph-ssr/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/examples/polls-demo/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/examples/polls-demo/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env*.local
29 |
30 | # vercel
31 | .vercel
32 |
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | .vscode/
37 |
38 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/cc/error.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | export default function Error({
4 | error,
5 | reset,
6 | }: {
7 | error: Error;
8 | reset: () => void;
9 | }) {
10 | return Error: {error.message}
;
11 | }
12 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/cc/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "./apollo-wrapper";
2 |
3 | export default async function Layout({
4 | children,
5 | }: {
6 | children: React.ReactNode;
7 | }) {
8 | return {children} ;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/cc/page.tsx:
--------------------------------------------------------------------------------
1 | import { PollWrapper } from "./poll-cc";
2 |
3 | export const dynamic = "force-dynamic";
4 |
5 | export default async function Home() {
6 | return ;
7 | }
8 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/apollo-client-integrations/c465affd9e31674e868cdc7ac90cf0cab4c7f70e/examples/polls-demo/app/favicon.ico
--------------------------------------------------------------------------------
/examples/polls-demo/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 | import { Space_Grotesk } from "next/font/google";
3 | import clsx from "clsx";
4 | import Link from "next/link";
5 |
6 | const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
7 |
8 | export const metadata = {
9 | title: "Apollo Next.js 13 Poll Demo",
10 | };
11 |
12 | export default function RootLayout({
13 | children,
14 | }: {
15 | children: React.ReactNode;
16 | }) {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 | Apollo Next.js 13 Poll Demo
25 |
26 |
27 |
28 |
29 | {children}
30 |
31 |
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/page.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | export default async function Home() {
4 | return (
5 |
6 |
7 |
8 | Client Components example
9 |
10 |
11 |
12 |
13 | RSC example
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/rsc/client.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
2 | import { registerApolloClient } from "@apollo/client-integration-nextjs/rsc";
3 |
4 | export const { getClient } = registerApolloClient(() => {
5 | return new ApolloClient({
6 | cache: new InMemoryCache(),
7 | link: new HttpLink({
8 | uri: "https://apollo-next-poll.up.railway.app/",
9 | }),
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/examples/polls-demo/app/rsc/page.tsx:
--------------------------------------------------------------------------------
1 | import { getClient } from "./client";
2 | import { Poll } from "./poll-rsc";
3 | import { ApolloWrapper } from "../cc/apollo-wrapper";
4 | import { GetPollDocument } from "@/components/poll/documents.generated";
5 |
6 | export const dynamic = "force-dynamic";
7 |
8 | export default async function Page() {
9 | const data = await getClient().query({
10 | query: GetPollDocument,
11 | variables: { id: "1" },
12 | });
13 |
14 | // we are using Apollo Wrapper here too so we can use
15 | // useMutation in the Poll component
16 | return (
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/examples/polls-demo/codegen.ts:
--------------------------------------------------------------------------------
1 | import type { CodegenConfig } from "@graphql-codegen/cli";
2 |
3 | const config: CodegenConfig = {
4 | overwrite: true,
5 | schema: "https://apollo-next-poll.up.railway.app/",
6 | documents: ["components/**/*.graphql"],
7 | generates: {
8 | "components/types.generated.ts": { plugins: ["typescript"] },
9 | "components/": {
10 | preset: "near-operation-file",
11 | presetConfig: {
12 | extension: ".generated.ts",
13 | baseTypesPath: "types.generated.ts",
14 | },
15 | plugins: ["typescript-operations", "typed-document-node"],
16 | },
17 | },
18 | };
19 |
20 | export default config;
21 |
--------------------------------------------------------------------------------
/examples/polls-demo/components/poll/documents.graphql:
--------------------------------------------------------------------------------
1 | mutation AnswerPoll($pollId: ID!, $answerId: ID!) {
2 | answerPoll(id: $pollId, answerId: $answerId) {
3 | id
4 | question
5 | totalVotes
6 | answers {
7 | id
8 | text
9 | votes
10 | percentage
11 | }
12 | }
13 | }
14 |
15 | query GetPoll($id: ID!, $delay: Int = 0) {
16 | poll(id: $id) @delay(ms: $delay) {
17 | id
18 | question
19 | totalVotes
20 | answers {
21 | id
22 | text
23 | votes
24 | percentage
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/examples/polls-demo/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | experimental: {},
4 | };
5 |
6 | module.exports = nextConfig;
7 |
--------------------------------------------------------------------------------
/examples/polls-demo/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/examples/polls-demo/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/polls-demo/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/examples/polls-demo/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
5 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
7 | ],
8 | theme: {},
9 | plugins: [],
10 | };
11 |
--------------------------------------------------------------------------------
/examples/polls-demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/integration-test/.gitignore:
--------------------------------------------------------------------------------
1 | .yarn/*
2 | !.yarn/patches
3 | !.yarn/plugins
4 | !.yarn/releases
5 | !.yarn/sdks
6 | !.yarn/versions
7 | node_modules/
8 | tsconfig.tsbuildinfo
9 | dist/
10 | .yalc
11 | yalc.lock
12 | *.tgz
13 | .DS_Store
14 | .vscode/
15 | .vercel
16 | .next/
17 | test-results/
18 | webpack-stats.json
19 | .output
20 | .vinxi
21 |
--------------------------------------------------------------------------------
/integration-test/jest/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | ["@babel/preset-env", { targets: { node: "current" } }],
4 | ["@babel/preset-react", { runtime: "automatic" }],
5 | ],
6 | };
7 |
--------------------------------------------------------------------------------
/integration-test/jest/jest.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('jest').Config} */
2 | const config = {
3 | testEnvironment: "jsdom",
4 | transformIgnorePatterns: [],
5 | setupFilesAfterEnv: ["/setupAfterEnv.jest.ts"],
6 | };
7 |
8 | module.exports = config;
9 |
--------------------------------------------------------------------------------
/integration-test/jest/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/jest",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "test": "jest"
7 | },
8 | "dependencies": {
9 | "@apollo/client": "^3.13.4",
10 | "@apollo/client-integration-nextjs": "workspace:^",
11 | "@apollo/client-react-streaming": "workspace:^",
12 | "@graphql-tools/schema": "^10.0.3",
13 | "graphql-tag": "^2.12.6",
14 | "react": "^19.0.0",
15 | "react-dom": "^19.0.0"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.24.0",
19 | "@babel/preset-env": "^7.24.0",
20 | "@babel/preset-react": "^7.23.3",
21 | "@testing-library/jest-dom": "^6.4.2",
22 | "@testing-library/react": "^16.1.0",
23 | "@testing-library/user-event": "^14.5.2",
24 | "@types/react": "*",
25 | "@types/react-dom": "*",
26 | "babel-jest": "^29.7.0",
27 | "graphql": "*",
28 | "jest": "^29.7.0",
29 | "jest-environment-jsdom": "^29.7.0",
30 | "jest-fixed-jsdom": "^0.0.9"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/integration-test/jest/setupAfterEnv.jest.ts:
--------------------------------------------------------------------------------
1 | import { TransformStream } from "node:stream/web";
2 |
3 | globalThis.TransformStream = TransformStream;
4 |
--------------------------------------------------------------------------------
/integration-test/jest/src/App.test.jsx:
--------------------------------------------------------------------------------
1 | import { render, screen, act } from "@testing-library/react";
2 | import userEvent from "@testing-library/user-event";
3 | import "@testing-library/jest-dom";
4 |
5 | import App from "./App";
6 | import { resetApolloClientSingletons } from "@apollo/client-integration-nextjs";
7 |
8 | afterEach(resetApolloClientSingletons);
9 |
10 | test("loads data", async () => {
11 | await act(async () => render( ));
12 |
13 | expect(screen.getByText("Loading...")).toBeInTheDocument();
14 | expect(
15 | await screen.findByText("Soft Warm Apollo Beanie")
16 | ).toBeInTheDocument();
17 | expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
18 | });
19 |
20 | test("is interactive", async () => {
21 | await act(async () => render( ));
22 |
23 | const counter = await screen.findByTestId("counter");
24 | expect(counter.textContent).toBe("0");
25 |
26 | await userEvent.click(screen.getByText("increment"));
27 |
28 | expect(counter.textContent).toBe("1");
29 | });
30 |
--------------------------------------------------------------------------------
/integration-test/jest/src/schema.js:
--------------------------------------------------------------------------------
1 | import { makeExecutableSchema } from "@graphql-tools/schema";
2 | import gql from "graphql-tag";
3 |
4 | const typeDefs = gql`
5 | type Product {
6 | id: String!
7 | title: String!
8 | }
9 | type Query {
10 | products: [Product!]!
11 | }
12 | `;
13 |
14 | const resolvers = {
15 | Query: {
16 | products: async () => [
17 | {
18 | id: "product:5",
19 | title: "Soft Warm Apollo Beanie",
20 | },
21 | {
22 | id: "product:2",
23 | title: "Stainless Steel Water Bottle",
24 | },
25 | {
26 | id: "product:3",
27 | title: "Athletic Baseball Cap",
28 | },
29 | {
30 | id: "product:4",
31 | title: "Baby Onesies",
32 | },
33 | {
34 | id: "product:1",
35 | title: "The Apollo T-Shirt",
36 | },
37 | {
38 | id: "product:6",
39 | title: "The Apollo Socks",
40 | },
41 | ],
42 | },
43 | };
44 |
45 | export const schema = makeExecutableSchema({
46 | typeDefs,
47 | resolvers,
48 | });
49 |
--------------------------------------------------------------------------------
/integration-test/nextjs/.env.local:
--------------------------------------------------------------------------------
1 | SECRET={"alg":"A256CBC","ext":true,"k":"yZrgd8urZnVpOSjC22EUNIDJZbmvEL4xApt_eraMsaU","key_ops":["encrypt","decrypt"],"kty":"oct"}
--------------------------------------------------------------------------------
/integration-test/nextjs/next-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
6 |
--------------------------------------------------------------------------------
/integration-test/nextjs/next.config.js:
--------------------------------------------------------------------------------
1 | const { StatsWriterPlugin } = require("webpack-stats-plugin");
2 |
3 | module.exports = {
4 | webpack: (config, options) => {
5 | const { dev, isServer } = options;
6 |
7 | // Output webpack stats JSON file only for
8 | // client-side/production build
9 | if (!dev && !isServer) {
10 | config.plugins.push(
11 | new StatsWriterPlugin({
12 | filename: "../webpack-stats.json",
13 | stats: {
14 | assets: true,
15 | chunks: true,
16 | modules: true,
17 | excludeAssets: [/webpack-stats.json/],
18 | },
19 | })
20 | );
21 | }
22 |
23 | return config;
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/integration-test/nextjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/nextjs",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "build-and-test": "yarn build && yarn test",
10 | "test": "yarn test:nextjs"
11 | },
12 | "dependencies": {
13 | "@apollo/client": "^3.13.4",
14 | "@apollo/client-integration-nextjs": "workspace:^",
15 | "@apollo/server": "^4.11.2",
16 | "@as-integrations/next": "^3.2.0",
17 | "@graphql-tools/schema": "^10.0.0",
18 | "@integration-test/shared": "workspace:^",
19 | "@types/node": "20.3.1",
20 | "@types/react": "^19.0.0",
21 | "@types/react-dom": "^19.0.0",
22 | "graphql": "^16.7.1",
23 | "graphql-17-alpha2": "npm:graphql@17.0.0-alpha.2",
24 | "graphql-tag": "^2.12.6",
25 | "next": "^15.2.4",
26 | "react": "^19.0.0",
27 | "react-dom": "^19.0.0",
28 | "react-error-boundary": "^4.0.13",
29 | "ssr-only-secrets": "^0.0.5",
30 | "typescript": "5.1.3"
31 | },
32 | "devDependencies": {
33 | "webpack-stats-plugin": "^1.1.3"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/cc/dynamic/layout.tsx:
--------------------------------------------------------------------------------
1 | import { headers } from "next/headers";
2 | import { ApolloWrapper } from "../ApolloWrapper";
3 | import { cloakSSROnlySecret } from "ssr-only-secrets";
4 |
5 | export default async function Layout({ children }: React.PropsWithChildren) {
6 | const nonce = (await headers()).get("x-nonce-param") ?? undefined;
7 | return (
8 |
11 | {children}
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQuery/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { TypedDocumentNode } from "@apollo/client";
4 | import {
5 | useBackgroundQuery,
6 | useReadQuery,
7 | gql,
8 | QueryRef,
9 | } from "@apollo/client";
10 | import { Suspense } from "react";
11 |
12 | interface Data {
13 | products: {
14 | id: string;
15 | title: string;
16 | }[];
17 | }
18 |
19 | const QUERY: TypedDocumentNode = gql`
20 | query dynamicProducts {
21 | products {
22 | id
23 | title
24 | }
25 | }
26 | `;
27 |
28 | export const dynamic = "force-dynamic";
29 |
30 | export default function Page() {
31 | const [queryRef] = useBackgroundQuery(QUERY, {
32 | context: { delay: 2000, error: "browser" },
33 | });
34 | return (
35 | loading
}>
36 |
37 |
38 | );
39 | }
40 |
41 | function DisplayData({ queryRef }: { queryRef: QueryRef }) {
42 | const { data } = useReadQuery(queryRef);
43 | globalThis.hydrationFinished?.();
44 | return (
45 |
46 | {data.products.map(({ id, title }) => (
47 | {title}
48 | ))}
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/cc/dynamic/useQuery/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { TypedDocumentNode } from "@apollo/client";
4 | import { useQuery, gql } from "@apollo/client";
5 |
6 | const QUERY: TypedDocumentNode<{
7 | products: {
8 | id: string;
9 | title: string;
10 | }[];
11 | }> = gql`
12 | query dynamicProducts {
13 | products {
14 | id
15 | title
16 | }
17 | }
18 | `;
19 |
20 | export const dynamic = "force-dynamic";
21 |
22 | export default function Page() {
23 | const result = useQuery(QUERY);
24 | globalThis.hydrationFinished?.();
25 |
26 | if (!result.data) {
27 | return Loading...
;
28 | }
29 |
30 | return (
31 |
32 | {result.data.products.map(({ id, title }) => (
33 | {title}
34 | ))}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/cc/dynamic/useQueryWithCache/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { TypedDocumentNode } from "@apollo/client";
4 | import { useQuery, useSuspenseQuery, gql } from "@apollo/client";
5 |
6 | const QUERY: TypedDocumentNode<{
7 | products: {
8 | id: string;
9 | title: string;
10 | }[];
11 | }> = gql`
12 | query dynamicProducts {
13 | products {
14 | id
15 | title
16 | }
17 | }
18 | `;
19 |
20 | export const dynamic = "force-dynamic";
21 |
22 | export default function Page() {
23 | useSuspenseQuery(QUERY); // fill cache with `useSuspenseQuery`
24 | const result = useQuery(QUERY);
25 | globalThis.hydrationFinished?.();
26 |
27 | if (!result.data) {
28 | return Loading...
;
29 | }
30 |
31 | return (
32 |
33 | {result.data.products.map(({ id, title }) => (
34 | {title}
35 | ))}
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/cc/static/layout.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "../ApolloWrapper";
2 |
3 | export default async function Layout({
4 | children,
5 | }: {
6 | children: React.ReactNode;
7 | }) {
8 | return {children} ;
9 | }
10 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/cc/static/useSuspenseQuery/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { TypedDocumentNode } from "@apollo/client";
4 | import { gql, useSuspenseQuery } from "@apollo/client";
5 |
6 | const QUERY: TypedDocumentNode<{
7 | products: {
8 | id: string;
9 | title: string;
10 | }[];
11 | }> = gql`
12 | query {
13 | products {
14 | id
15 | title
16 | }
17 | }
18 | `;
19 |
20 | export const dynamic = "force-static";
21 |
22 | export default function Page() {
23 | const { data } = useSuspenseQuery(QUERY);
24 | globalThis.hydrationFinished?.();
25 |
26 | return (
27 |
28 | {data.products.map(({ id, title }) => (
29 | {title}
30 | ))}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/graphql/route.ts:
--------------------------------------------------------------------------------
1 | import { startServerAndCreateNextHandler } from "@as-integrations/next";
2 | import { ApolloServer } from "@apollo/server";
3 | import { schema } from "@integration-test/shared/schema";
4 |
5 | const server = new ApolloServer({
6 | schema,
7 | });
8 |
9 | const handler = startServerAndCreateNextHandler(server, {
10 | context: async () => {
11 | return {
12 | from: "network",
13 | };
14 | },
15 | });
16 |
17 | export async function GET(request: Request) {
18 | return handler(request);
19 | }
20 |
21 | export async function POST(request: Request) {
22 | return handler(request);
23 | }
24 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | export const metadata = {
2 | title: "Create Next App",
3 | description: "Generated by create next app",
4 | };
5 |
6 | export default function RootLayout({
7 | children,
8 | }: {
9 | children: React.ReactNode;
10 | }) {
11 | return (
12 |
13 | {children}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/client.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ApolloClient,
3 | InMemoryCache,
4 | registerApolloClient,
5 | } from "@apollo/client-integration-nextjs";
6 |
7 | import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
8 | import { setVerbosity } from "ts-invariant";
9 | import { delayLink } from "@integration-test/shared/delayLink";
10 | import { errorLink } from "@integration-test/shared/errorLink";
11 |
12 | import { schema } from "@integration-test/shared/schema";
13 | import { IncrementalSchemaLink } from "@integration-test/shared/IncrementalSchemaLink";
14 |
15 | setVerbosity("debug");
16 | loadDevMessages();
17 | loadErrorMessages();
18 |
19 | export const { getClient, PreloadQuery, query } = registerApolloClient(() => {
20 | return new ApolloClient({
21 | cache: new InMemoryCache(),
22 | link: delayLink.concat(
23 | errorLink.concat(new IncrementalSchemaLink({ schema }))
24 | ),
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/defer-queryRef-useReadQuery/page.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "@/app/cc/ApolloWrapper";
2 | import { ClientChild } from "./ClientChild";
3 | import { DEFERRED_QUERY_WITH_FRAGMENT } from "@integration-test/shared/queries";
4 |
5 | export const dynamic = "force-dynamic";
6 | import { PreloadQuery } from "../../../client";
7 | import { Suspense } from "react";
8 |
9 | export default async function Page({ searchParams }: { searchParams?: any }) {
10 | return (
11 |
12 |
20 | {(queryRef) => (
21 | loading>}>
22 |
23 |
24 | )}
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/error.tsx:
--------------------------------------------------------------------------------
1 | "use client"; // Error boundaries must be Client Components
2 |
3 | export default function Error({
4 | error,
5 | reset,
6 | }: {
7 | error: Error & { digest?: string };
8 | reset: () => void;
9 | }) {
10 | return (
11 | <>
12 | Encountered an error:
13 | {error.message}
14 | reset()}>Try again
15 | >
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/ClientChild.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useQueryRefHandlers, useReadQuery } from "@apollo/client";
4 | import { DynamicProductResult } from "@integration-test/shared/queries";
5 | import { TransportedQueryRef } from "@apollo/client-integration-nextjs";
6 |
7 | export function ClientChild({
8 | queryRef,
9 | }: {
10 | queryRef: TransportedQueryRef;
11 | }) {
12 | const { refetch } = useQueryRefHandlers(queryRef);
13 | const { data } = useReadQuery(queryRef);
14 | return (
15 | <>
16 |
17 | {data.products.map(({ id, title }: any) => (
18 | {title}
19 | ))}
20 |
21 | Queried in {data.env} environment
22 | refetch()}>refetch
23 | >
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/page.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "@/app/cc/ApolloWrapper";
2 | import { ClientChild } from "./ClientChild";
3 | import { QUERY } from "@integration-test/shared/queries";
4 |
5 | export const dynamic = "force-dynamic";
6 | import { PreloadQuery } from "../../../client";
7 | import { Suspense } from "react";
8 |
9 | export default async function Page({ searchParams }: { searchParams?: any }) {
10 | return (
11 |
12 |
19 | {(queryRef) => (
20 | loading>}>
21 |
22 |
23 | )}
24 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/useSuspenseQuery/ClientChild.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useSuspenseQuery } from "@apollo/client";
4 | import { QUERY } from "@integration-test/shared/queries";
5 |
6 | export function ClientChild() {
7 | const { data } = useSuspenseQuery(QUERY);
8 | return (
9 | <>
10 |
11 | {data.products.map(({ id, title }: any) => (
12 | {title}
13 | ))}
14 |
15 | Queried in {data.env} environment
16 | >
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/useSuspenseQuery/page.tsx:
--------------------------------------------------------------------------------
1 | import { ApolloWrapper } from "@/app/cc/ApolloWrapper";
2 | import { ClientChild } from "./ClientChild";
3 | import { QUERY } from "@integration-test/shared/queries";
4 |
5 | export const dynamic = "force-dynamic";
6 | import { PreloadQuery } from "../../../client";
7 | import { Suspense } from "react";
8 |
9 | export default async function Page({ searchParams }: { searchParams?: any }) {
10 | return (
11 |
12 |
19 | loading>}>
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/dynamic/query/page.tsx:
--------------------------------------------------------------------------------
1 | import type { TypedDocumentNode } from "@apollo/client";
2 | import { gql } from "@apollo/client";
3 | import { getClient } from "../../client";
4 |
5 | const QUERY: TypedDocumentNode<{
6 | products: {
7 | id: string;
8 | title: string;
9 | }[];
10 | }> = gql`
11 | query dynamicProducts {
12 | products {
13 | id
14 | title
15 | }
16 | }
17 | `;
18 |
19 | export const dynamic = "force-dynamic";
20 |
21 | export default async function Home() {
22 | const { data } = await getClient().query({ query: QUERY });
23 | return (
24 |
25 | {data.products.map(({ id, title }) => (
26 | {title}
27 | ))}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/app/rsc/static/query/page.tsx:
--------------------------------------------------------------------------------
1 | import type { TypedDocumentNode } from "@apollo/client";
2 | import { gql } from "@apollo/client";
3 | import { query } from "../../client";
4 |
5 | const QUERY: TypedDocumentNode<{
6 | products: {
7 | id: string;
8 | title: string;
9 | }[];
10 | }> = gql`
11 | query dynamicProducts {
12 | products {
13 | id
14 | title
15 | }
16 | }
17 | `;
18 |
19 | export const dynamic = "force-static";
20 |
21 | export default async function Home() {
22 | const { data } = await query({ query: QUERY });
23 | return (
24 |
25 | {data.products.map(({ id, title }) => (
26 | {title}
27 | ))}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/global.d.ts:
--------------------------------------------------------------------------------
1 | export {};
2 |
3 | declare global {
4 | var hydrationFinished: undefined | (() => void);
5 | }
6 |
--------------------------------------------------------------------------------
/integration-test/nextjs/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 |
3 | export function middleware(request: NextRequest) {
4 | const nonce = request.nextUrl.searchParams.get("nonce");
5 | if (nonce) {
6 | // we set a fixed nonce here so we can test correct and incorrect nonce values
7 | const validNonce = "8IBTHwOdqNKAWeKl7plt8g==";
8 | // 'unsafe-eval' for `react-refresh`
9 | const contentSecurityPolicyHeaderValue = `default-src 'self'; script-src 'nonce-${validNonce}' 'strict-dynamic' 'unsafe-eval';`;
10 |
11 | const requestHeaders = new Headers(request.headers);
12 | // valid nonce for next
13 | requestHeaders.set("x-nonce", validNonce);
14 | // potentially invalid nonce for `ApolloNextAppProvider`
15 | requestHeaders.set("x-nonce-param", nonce);
16 | requestHeaders.set(
17 | "Content-Security-Policy",
18 | contentSecurityPolicyHeaderValue
19 | );
20 |
21 | const response = NextResponse.next({
22 | request: {
23 | headers: requestHeaders,
24 | },
25 | });
26 | response.headers.set(
27 | "Content-Security-Policy",
28 | contentSecurityPolicyHeaderValue
29 | );
30 |
31 | return response;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/integration-test/nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": true,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "esModuleInterop": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "isolatedModules": true,
19 | "jsx": "preserve",
20 | "incremental": true,
21 | "plugins": [
22 | {
23 | "name": "next"
24 | }
25 | ],
26 | "paths": {
27 | "@/*": [
28 | "./src/*"
29 | ]
30 | }
31 | },
32 | "include": [
33 | "next-env.d.ts",
34 | "**/*.ts",
35 | "**/*.tsx",
36 | ".next/types/**/*.ts",
37 | "../shared/*.ts",
38 | ],
39 | "exclude": [
40 | "node_modules"
41 | ]
42 | }
--------------------------------------------------------------------------------
/integration-test/playwright/empty.har:
--------------------------------------------------------------------------------
1 | {
2 | "log": {
3 | "version": "1.2",
4 | "creator": {
5 | "name": "Playwright",
6 | "version": "1.35.1"
7 | },
8 | "browser": {
9 | "name": "chromium",
10 | "version": "115.0.5790.24"
11 | },
12 | "entries": []
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/integration-test/playwright/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/playwright",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "test": "yarn playwright test",
7 | "test:nextjs": "TEST_PROJECT_DIR=../nextjs yarn playwright test --grep=@nextjs",
8 | "test:tanstack": "TEST_PROJECT_DIR=../tanstack-start yarn playwright test --grep=@tanstack",
9 | "test:react-router": "TEST_PROJECT_DIR=../react-router yarn playwright test --grep=@react-router"
10 | },
11 | "devDependencies": {
12 | "@playwright/test": "^1.49.1",
13 | "typescript": "5.1.3"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/integration-test/playwright/src/helpers.ts:
--------------------------------------------------------------------------------
1 | export function matchesTag(tag: string) {
2 | const grep = JSON.parse(process.env.GREP || "null");
3 | return grep && new RegExp(grep).test(tag);
4 | }
5 |
--------------------------------------------------------------------------------
/integration-test/playwright/src/rsc-dynamic.test.ts:
--------------------------------------------------------------------------------
1 | import { expect } from "@playwright/test";
2 | import { test } from "../fixture";
3 |
4 | test.describe(
5 | "RSC dynamic",
6 | {
7 | tag: ["@nextjs"],
8 | },
9 | () => {
10 | test("query (one query)", async ({ page, blockRequest }) => {
11 | await page.goto("/rsc/dynamic/query", {
12 | waitUntil: "commit",
13 | });
14 |
15 | await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
16 | });
17 | }
18 | );
19 |
--------------------------------------------------------------------------------
/integration-test/playwright/src/rsc-static.test.ts:
--------------------------------------------------------------------------------
1 | import { expect } from "@playwright/test";
2 | import { test } from "../fixture";
3 |
4 | test.describe(
5 | "RSC static",
6 | {
7 | tag: ["@nextjs"],
8 | },
9 | () => {
10 | test("query (one query)", async ({ page, blockRequest }) => {
11 | await page.goto("/rsc/static/query", {
12 | waitUntil: "commit",
13 | });
14 |
15 | await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
16 | });
17 | }
18 | );
19 |
--------------------------------------------------------------------------------
/integration-test/playwright/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./src/*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../shared/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/integration-test/react-router/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules/
3 |
4 | # React Router
5 | /.react-router/
6 | /build/
7 |
--------------------------------------------------------------------------------
/integration-test/react-router/app/apollo.ts:
--------------------------------------------------------------------------------
1 | import { ApolloLink, HttpLink, InMemoryCache } from "@apollo/client/index.js";
2 | import {
3 | createApolloLoaderHandler,
4 | ApolloClient,
5 | } from "@apollo/client-integration-react-router";
6 | import { IncrementalSchemaLink } from "@integration-test/shared/IncrementalSchemaLink";
7 | import { schema } from "@integration-test/shared/schema";
8 | import { delayLink } from "@integration-test/shared/delayLink";
9 | import { errorLink } from "@integration-test/shared/errorLink";
10 |
11 | const link = ApolloLink.from([
12 | delayLink,
13 | errorLink,
14 | typeof window === "undefined"
15 | ? (new IncrementalSchemaLink({ schema }) as any as ApolloLink)
16 | : new HttpLink({ uri: "/graphql" }),
17 | ]);
18 |
19 | export const makeClient = (request?: Request) => {
20 | return new ApolloClient({
21 | cache: new InMemoryCache(),
22 | link,
23 | });
24 | };
25 | export const apolloLoader = createApolloLoaderHandler(makeClient);
26 |
--------------------------------------------------------------------------------
/integration-test/react-router/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { startTransition, StrictMode } from "react";
2 | import { hydrateRoot } from "react-dom/client";
3 | import { HydratedRouter } from "react-router/dom";
4 | import { makeClient } from "./apollo";
5 | import { ApolloProvider } from "@apollo/client/react/index.js";
6 |
7 | startTransition(() => {
8 | const client = makeClient();
9 | hydrateRoot(
10 | document,
11 |
12 |
13 |
14 |
15 |
16 | );
17 | });
18 |
--------------------------------------------------------------------------------
/integration-test/react-router/app/routes.ts:
--------------------------------------------------------------------------------
1 | import { flatRoutes } from "@react-router/fs-routes";
2 |
3 | export default flatRoutes();
4 |
--------------------------------------------------------------------------------
/integration-test/react-router/app/routes/graphql.ts:
--------------------------------------------------------------------------------
1 | import { schema } from "@integration-test/shared/schema";
2 | import { apiRouteHandler } from "@integration-test/shared/apiRoute";
3 |
4 | export const action = apiRouteHandler({ schema });
5 |
--------------------------------------------------------------------------------
/integration-test/react-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/react-router",
3 | "version": "0.0.0",
4 | "private": true,
5 | "type": "module",
6 | "scripts": {
7 | "build": "react-router build",
8 | "dev": "react-router dev --port 3000",
9 | "start": "react-router-serve ./build/server/index.js",
10 | "typecheck": "react-router typegen && tsc",
11 | "test": "yarn test:react-router"
12 | },
13 | "dependencies": {
14 | "@apollo/client": "^3.13.4",
15 | "@apollo/client-integration-react-router": "workspace:^",
16 | "@integration-test/shared": "workspace:^",
17 | "@react-router/fs-routes": "^7.2.0-pre.3",
18 | "@react-router/node": "^7.2.0-pre.3",
19 | "@react-router/serve": "^7.2.0-pre.3",
20 | "@vercel/react-router": "^1.0.2",
21 | "graphql": "*",
22 | "isbot": "^5.1.17",
23 | "react": "^19.0.0",
24 | "react-dom": "^19.0.0",
25 | "react-router": "^7.2.0-pre.3"
26 | },
27 | "devDependencies": {
28 | "@react-router/dev": "^7.2.0-pre.3",
29 | "@tailwindcss/vite": "^4.0.0",
30 | "@types/node": "^20",
31 | "@types/react": "^19.0.1",
32 | "@types/react-dom": "^19.0.1",
33 | "react-router-devtools": "^1.1.0",
34 | "tailwindcss": "^4.0.0",
35 | "typescript": "^5.7.2",
36 | "vite": "^5.4.11",
37 | "vite-tsconfig-paths": "^5.1.4"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/integration-test/react-router/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/apollographql/apollo-client-integrations/c465affd9e31674e868cdc7ac90cf0cab4c7f70e/integration-test/react-router/public/favicon.ico
--------------------------------------------------------------------------------
/integration-test/react-router/react-router.config.ts:
--------------------------------------------------------------------------------
1 | import { vercelPreset } from "@vercel/react-router/vite";
2 | import type { Config, Preset } from "@react-router/dev/config";
3 |
4 | let presets: Array = [];
5 | if (process.env.VERCEL) {
6 | console.log("Adding Vercel preset");
7 | presets.push(vercelPreset());
8 | }
9 |
10 | export default {
11 | // Config options...
12 | // Server-side render by default, to enable SPA mode set this to `false`
13 | ssr: true,
14 | presets,
15 | } satisfies Config;
16 |
--------------------------------------------------------------------------------
/integration-test/react-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": [
3 | "**/*",
4 | "**/.server/**/*",
5 | "**/.client/**/*",
6 | ".react-router/types/**/*",
7 | "../shared/**/*"
8 | ],
9 | "compilerOptions": {
10 | "lib": [
11 | "DOM",
12 | "DOM.Iterable",
13 | "ES2022"
14 | ],
15 | "types": [
16 | "node",
17 | "vite/client"
18 | ],
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "moduleResolution": "bundler",
22 | "jsx": "react-jsx",
23 | "rootDirs": [
24 | ".",
25 | "./.react-router/types"
26 | ],
27 | "baseUrl": ".",
28 | "paths": {
29 | "~/*": [
30 | "./app/*"
31 | ]
32 | },
33 | "esModuleInterop": true,
34 | "verbatimModuleSyntax": true,
35 | "noEmit": true,
36 | "resolveJsonModule": true,
37 | "skipLibCheck": true,
38 | "strict": true
39 | }
40 | }
--------------------------------------------------------------------------------
/integration-test/react-router/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { reactRouter } from "@react-router/dev/vite";
2 | import tailwindcss from "@tailwindcss/vite";
3 | import { defineConfig } from "vite";
4 | import tsconfigPaths from "vite-tsconfig-paths";
5 |
6 | export default defineConfig({
7 | plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
8 | });
9 |
--------------------------------------------------------------------------------
/integration-test/shared/delayLink.ts:
--------------------------------------------------------------------------------
1 | import { ApolloLink, Observable } from "@apollo/client/index.js";
2 |
3 | declare module "@apollo/client" {
4 | export interface DefaultContext {
5 | delay?: number;
6 | }
7 | }
8 |
9 | export const delayLink = new ApolloLink((operation, forward) => {
10 | if (operation.operationName?.includes("dynamic")) {
11 | operation.setContext({
12 | fetchOptions: { cache: "no-store" },
13 | });
14 | }
15 |
16 | // slow down network requests so that the browser might want to make an api request
17 | return new Observable((observer) => {
18 | const timeout = setTimeout(() => {
19 | forward(operation).subscribe(observer);
20 | }, operation.getContext().delay ?? 1500);
21 | return () => clearTimeout(timeout);
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/integration-test/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/shared",
3 | "version": "0.0.0",
4 | "private": true,
5 | "peerDependencies": {
6 | "@apollo/client": "*"
7 | },
8 | "devDependencies": {
9 | "@types/react": "*",
10 | "@types/react-dom": "*",
11 | "graphql": "*",
12 | "react": "*",
13 | "react-dom": "*"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "@tanstack/start/config";
2 |
3 | export default defineConfig({});
4 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/api.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createStartAPIHandler,
3 | defaultAPIFileRouteHandler,
4 | } from "@tanstack/start/api";
5 |
6 | export default createStartAPIHandler(defaultAPIFileRouteHandler);
7 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/client.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import { hydrateRoot } from "react-dom/client";
3 | import { StartClient } from "@tanstack/start";
4 | import { createRouter } from "./router";
5 |
6 | const router = createRouter();
7 |
8 | hydrateRoot(document, );
9 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/routes/api.graphql.ts:
--------------------------------------------------------------------------------
1 | import { createAPIFileRoute } from "@tanstack/start/api";
2 | import { schema } from "@integration-test/shared/schema";
3 | import { apiRouteHandler } from "@integration-test/shared/apiRoute";
4 |
5 | export const APIRoute = createAPIFileRoute("/api/graphql")({
6 | POST: apiRouteHandler({ schema }),
7 | });
8 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { createFileRoute } from "@tanstack/react-router";
2 |
3 | export const Route = createFileRoute("/")({
4 | component: RouteComponent,
5 | });
6 |
7 | function RouteComponent() {
8 | return Hello!
;
9 | }
10 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/routes/useBackgroundQuery.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | QueryRef,
3 | useBackgroundQuery,
4 | useReadQuery,
5 | } from "@apollo/client/react/index.js";
6 | import { DynamicProductResult, QUERY } from "@integration-test/shared/queries";
7 | import { createFileRoute } from "@tanstack/react-router";
8 | import { Suspense } from "react";
9 |
10 | export const Route = createFileRoute("/useBackgroundQuery")({
11 | component: RouteComponent,
12 | });
13 |
14 | function RouteComponent() {
15 | const [queryRef] = useBackgroundQuery(QUERY, {
16 | context: { delay: 1000, error: "browser" },
17 | });
18 | return (
19 | loading}>
20 |
21 |
22 | );
23 | }
24 |
25 | function DisplayData({
26 | queryRef,
27 | }: {
28 | queryRef: QueryRef;
29 | }) {
30 | const { data } = useReadQuery(queryRef);
31 | globalThis.hydrationFinished?.();
32 | return (
33 |
34 | {data.products.map(({ id, title }) => (
35 | {title}
36 | ))}
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/routes/useBackgroundQueryWithoutSsrReadQuery.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | QueryRef,
3 | useBackgroundQuery,
4 | useReadQuery,
5 | } from "@apollo/client/react/index.js";
6 | import { DynamicProductResult, QUERY } from "@integration-test/shared/queries";
7 | import { createFileRoute } from "@tanstack/react-router";
8 | import { Suspense, useSyncExternalStore } from "react";
9 |
10 | export const Route = createFileRoute("/useBackgroundQueryWithoutSsrReadQuery")({
11 | component: RouteComponent,
12 | });
13 |
14 | function RouteComponent() {
15 | const [queryRef] = useBackgroundQuery(QUERY, {
16 | context: { delay: 1000, error: "browser" },
17 | });
18 | const isClient = useSyncExternalStore(
19 | () => () => {},
20 | () => true,
21 | () => false
22 | );
23 | return (
24 | <>
25 | {isClient ? "rendered on client" : "rendered on server"}
26 | loading}>
27 | {isClient && }
28 |
29 | >
30 | );
31 | }
32 |
33 | function DisplayData({
34 | queryRef,
35 | }: {
36 | queryRef: QueryRef;
37 | }) {
38 | const { data } = useReadQuery(queryRef);
39 | globalThis.hydrationFinished?.();
40 | return (
41 |
42 | {data.products.map(({ id, title }) => (
43 | {title}
44 | ))}
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/routes/useQuery.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery } from "@apollo/client/react/index.js";
2 | import { QUERY } from "@integration-test/shared/queries";
3 | import { createFileRoute } from "@tanstack/react-router";
4 |
5 | export const Route = createFileRoute("/useQuery")({
6 | component: RouteComponent,
7 | });
8 |
9 | function RouteComponent() {
10 | const result = useQuery(QUERY);
11 | globalThis.hydrationFinished?.();
12 |
13 | if (!result.data) {
14 | return Loading...
;
15 | }
16 |
17 | return (
18 |
19 | {result.data.products.map(({ id, title }) => (
20 | {title}
21 | ))}
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/routes/useQueryWithCache.tsx:
--------------------------------------------------------------------------------
1 | import { useQuery, useSuspenseQuery } from "@apollo/client/react/index.js";
2 | import { QUERY } from "@integration-test/shared/queries";
3 | import { createFileRoute } from "@tanstack/react-router";
4 |
5 | export const Route = createFileRoute("/useQueryWithCache")({
6 | component: RouteComponent,
7 | });
8 |
9 | function RouteComponent() {
10 | useSuspenseQuery(QUERY); // fill cache with `useSuspenseQuery`
11 | const result = useQuery(QUERY);
12 | globalThis.hydrationFinished?.();
13 |
14 | if (!result.data) {
15 | return Loading...
;
16 | }
17 |
18 | return (
19 |
20 | {result.data.products.map(({ id, title }) => (
21 | {title}
22 | ))}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/app/ssr.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import {
3 | createStartHandler,
4 | defaultStreamHandler,
5 | } from "@tanstack/start/server";
6 | import { getRouterManifest } from "@tanstack/start/router-manifest";
7 |
8 | import { createRouter } from "./router";
9 |
10 | export default createStartHandler({
11 | createRouter,
12 | getRouterManifest,
13 | })(defaultStreamHandler);
14 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/tanstack-start",
3 | "version": "0.0.0",
4 | "private": true,
5 | "type": "module",
6 | "scripts": {
7 | "dev": "rm -rvf node_modules/.vinxi node_modules/.cache node_modules/.tanstack-start .output .vinxi && vinxi dev",
8 | "build": "rm -rvf node_modules/.vinxi node_modules/.cache node_modules/.tanstack-start .output .vinxi && vinxi build",
9 | "start": "vinxi start",
10 | "test": "yarn test:tanstack"
11 | },
12 | "dependencies": {
13 | "@apollo/client": "^3.13.4",
14 | "@apollo/client-integration-tanstack-start": "workspace:^",
15 | "@integration-test/shared": "workspace:^",
16 | "@tanstack/router-devtools": "^1.99.0",
17 | "@tanstack/start": "^1.99.3",
18 | "graphql": "^16.10.0",
19 | "react": "^19.0.0",
20 | "react-dom": "^19.0.0",
21 | "react-error-boundary": "^5.0.0",
22 | "vinxi": "^0.5.1"
23 | },
24 | "devDependencies": {
25 | "@types/react": "^19.0.2",
26 | "@types/react-dom": "^19.0.2",
27 | "@vitejs/plugin-react": "^4.3.4",
28 | "typescript": "^5.7.2"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/integration-test/tanstack-start/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "target": "ES2022",
5 | "module": "ES2022",
6 | "moduleResolution": "bundler",
7 | "skipLibCheck": true,
8 | "strictNullChecks": true,
9 | },
10 | }
--------------------------------------------------------------------------------
/integration-test/vite-streaming/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/vite-streaming",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "node server",
8 | "build": "npm run build:client && npm run build:server",
9 | "build:client": "vite build --ssrManifest --outDir dist/client",
10 | "build:server": "vite build --ssr src/entry-server.jsx --outDir dist/server",
11 | "preview": "cross-env NODE_ENV=production node server",
12 | "build-and-test": "yarn build && yarn test",
13 | "test": "yarn playwright test"
14 | },
15 | "dependencies": {
16 | "@apollo/client": "^3.13.4",
17 | "@apollo/client-react-streaming": "workspace:^",
18 | "compression": "^1.7.4",
19 | "express": "^4.21.2",
20 | "graphql": "^16.8.1",
21 | "graphql-tag": "^2.12.6",
22 | "react": "^19.0.0",
23 | "react-dom": "^19.0.0",
24 | "sirv": "^2.0.4"
25 | },
26 | "devDependencies": {
27 | "@playwright/test": "^1.49.1",
28 | "@tsconfig/vite-react": "^3.0.0",
29 | "@types/react": "^19.0.0",
30 | "@types/react-dom": "^19.0.0",
31 | "@vitejs/plugin-react": "^4.2.1",
32 | "cross-env": "^7.0.3",
33 | "prettier": "^3.2.5",
34 | "vite": "^5.0.10"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "@playwright/test";
2 |
3 | export default defineConfig({
4 | webServer: {
5 | command: "node server",
6 | port: 3000,
7 | timeout: 120 * 1000,
8 | reuseExistingServer: !process.env.CI,
9 | env: {
10 | PORT: 3000,
11 | NODE_ENV: "production",
12 | },
13 | },
14 | timeout: 120 * 1000,
15 | use: {
16 | headless: true,
17 | viewport: { width: 1280, height: 720 },
18 | ignoreHTTPSErrors: true,
19 | },
20 | testDir: "src/",
21 | });
22 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/src/Transport.tsx:
--------------------------------------------------------------------------------
1 | import { WrapApolloProvider } from "@apollo/client-react-streaming";
2 | import { buildManualDataTransport } from "@apollo/client-react-streaming/manual-transport";
3 | import * as React from "react";
4 | import { setVerbosity } from "ts-invariant";
5 |
6 | setVerbosity("debug");
7 |
8 | const InjectionContext = React.createContext<
9 | (callback: () => React.ReactNode) => void
10 | >(() => {});
11 |
12 | export const InjectionContextProvider = InjectionContext.Provider;
13 |
14 | export const WrappedApolloProvider = WrapApolloProvider(
15 | buildManualDataTransport({
16 | useInsertHtml() {
17 | return React.useContext(InjectionContext);
18 | },
19 | })
20 | );
21 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/src/entry-client.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App";
4 | import Html from "./Html";
5 | import { InjectionContextProvider } from "./Transport";
6 |
7 | ReactDOM.hydrateRoot(
8 | document,
9 | {}}>
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/src/entry-server.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from "react";
2 | import App from "./App";
3 | import Html from "./Html";
4 | import { InjectionContextProvider } from "./Transport";
5 | export * from "./Transport";
6 | export function render({ isProduction, assets, injectIntoStream }) {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/src/hydration.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "@playwright/test";
2 |
3 | test("page streams in", async ({ page }) => {
4 | await page.goto("http://localhost:3000/", {
5 | waitUntil: "commit",
6 | });
7 | await expect(page.getByText("Loading...")).toBeVisible();
8 | await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
9 | await expect(page.getByText("Loading...")).not.toBeVisible();
10 | });
11 |
12 | test("page gets interactive", async ({ page }) => {
13 | await page.goto("http://localhost:3000/", {
14 | waitUntil: "commit",
15 | });
16 | await expect(page.getByTestId("counter")).toHaveText("0");
17 | await page.getByText("increment").click();
18 | await expect(page.getByTestId("counter")).toHaveText("1");
19 | });
20 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/src/schema.ts:
--------------------------------------------------------------------------------
1 | import { makeExecutableSchema } from "@graphql-tools/schema";
2 | import gql from "graphql-tag";
3 |
4 | const typeDefs = gql`
5 | type Product {
6 | id: String!
7 | title: String!
8 | }
9 | type Query {
10 | products: [Product!]!
11 | }
12 | `;
13 |
14 | const resolvers = {
15 | Query: {
16 | products: async () => [
17 | {
18 | id: "product:5",
19 | title: "Soft Warm Apollo Beanie",
20 | },
21 | {
22 | id: "product:2",
23 | title: "Stainless Steel Water Bottle",
24 | },
25 | {
26 | id: "product:3",
27 | title: "Athletic Baseball Cap",
28 | },
29 | {
30 | id: "product:4",
31 | title: "Baby Onesies",
32 | },
33 | {
34 | id: "product:1",
35 | title: "The Apollo T-Shirt",
36 | },
37 | {
38 | id: "product:6",
39 | title: "The Apollo Socks",
40 | },
41 | ],
42 | },
43 | };
44 |
45 | export const schema = makeExecutableSchema({
46 | typeDefs,
47 | resolvers,
48 | });
49 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/vite-react/tsconfig.json",
3 | "compilerOptions": {
4 | "types": ["react/canary", "react-dom/canary", "node"]
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/integration-test/vite-streaming/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | });
8 |
--------------------------------------------------------------------------------
/integration-test/vitest/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@integration-test/vitest",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "test": "vitest"
7 | },
8 | "dependencies": {
9 | "@apollo/client": "^3.13.4",
10 | "@apollo/client-integration-nextjs": "workspace:^",
11 | "@graphql-tools/schema": "^10.0.3",
12 | "graphql-tag": "^2.12.6",
13 | "react": "^19.0.0",
14 | "react-dom": "^19.0.0"
15 | },
16 | "devDependencies": {
17 | "@testing-library/jest-dom": "^6.4.2",
18 | "@testing-library/react": "^16.1.0",
19 | "@types/react": "*",
20 | "@types/react-dom": "*",
21 | "@vitejs/plugin-react": "^4.2.1",
22 | "graphql": "*",
23 | "vitest": "^3.1.2"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/integration-test/vitest/setup.js:
--------------------------------------------------------------------------------
1 | import { expect, afterEach } from "vitest";
2 | import { cleanup } from "@testing-library/react";
3 | import * as matchers from "@testing-library/jest-dom/matchers";
4 |
5 | expect.extend(matchers);
6 |
7 | afterEach(() => {
8 | cleanup();
9 | });
10 |
--------------------------------------------------------------------------------
/integration-test/vitest/src/App.test.jsx:
--------------------------------------------------------------------------------
1 | import { act, render, screen } from "@testing-library/react";
2 | import userEvent from "@testing-library/user-event";
3 |
4 | import App from "./App";
5 | import { resetApolloClientSingletons } from "@apollo/client-integration-nextjs";
6 |
7 | afterEach(resetApolloClientSingletons);
8 |
9 | test("loads data", async () => {
10 | await act(() => {
11 | render( );
12 | });
13 |
14 | expect(screen.getByText("Loading...")).toBeInTheDocument();
15 | expect(
16 | await screen.findByText("Soft Warm Apollo Beanie")
17 | ).toBeInTheDocument();
18 | expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
19 | });
20 |
21 | test("is interactive", async () => {
22 | await act(() => {
23 | render( );
24 | });
25 |
26 | const counter = await screen.findByTestId("counter");
27 | expect(counter.textContent).toBe("0");
28 |
29 | await userEvent.click(screen.getByText("increment"));
30 |
31 | expect(counter.textContent).toBe("1");
32 | });
33 |
--------------------------------------------------------------------------------
/integration-test/vitest/src/schema.js:
--------------------------------------------------------------------------------
1 | import { makeExecutableSchema } from "@graphql-tools/schema";
2 | import gql from "graphql-tag";
3 |
4 | const typeDefs = gql`
5 | type Product {
6 | id: String!
7 | title: String!
8 | }
9 | type Query {
10 | products: [Product!]!
11 | }
12 | `;
13 |
14 | const resolvers = {
15 | Query: {
16 | products: async () => [
17 | {
18 | id: "product:5",
19 | title: "Soft Warm Apollo Beanie",
20 | },
21 | {
22 | id: "product:2",
23 | title: "Stainless Steel Water Bottle",
24 | },
25 | {
26 | id: "product:3",
27 | title: "Athletic Baseball Cap",
28 | },
29 | {
30 | id: "product:4",
31 | title: "Baby Onesies",
32 | },
33 | {
34 | id: "product:1",
35 | title: "The Apollo T-Shirt",
36 | },
37 | {
38 | id: "product:6",
39 | title: "The Apollo Socks",
40 | },
41 | ],
42 | },
43 | };
44 |
45 | export const schema = makeExecutableSchema({
46 | typeDefs,
47 | resolvers,
48 | });
49 |
--------------------------------------------------------------------------------
/integration-test/vitest/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | export default defineConfig({
5 | plugins: [react()],
6 | resolve: {
7 | // this line is important so the "browser build" of dependencies is used
8 | // and not the "SSR build", which would contain "streaming-to-the-browser"
9 | // specific code
10 | conditions: ["browser"],
11 | },
12 | test: {
13 | globals: true,
14 | environment: "jsdom",
15 | setupFiles: "./setup.js",
16 | server: {
17 | // this is important so that the `graphql` dependency is inlined by vitest,
18 | // which seems to get around the "dual package hazard" with ESM/CJS
19 | // at least in this specific setup
20 | deps: {
21 | inline: true,
22 | },
23 | },
24 | },
25 | });
26 |
--------------------------------------------------------------------------------
/knip.config.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | /** @type{import('knip').KnipConfig}*/
4 | const config = {
5 | workspaces: {
6 | ".": {
7 | ignoreBinaries: ["jq", "playwright"],
8 | ignoreDependencies: [/@size-limit\/.*/, "prettier", "zx"],
9 | },
10 | "packages/*": {
11 | entry: ["**/*.test.{ts,tsx}"],
12 | project: ["**/*.{ts,tsx}"],
13 | },
14 | "packages/test-utils": {
15 | entry: ["*.js"],
16 | },
17 | "packages/client-react-streaming": {
18 | entry: ["**/*.test.{ts,tsx}"],
19 | project: ["**/*.{ts,tsx}"],
20 | ignoreDependencies: ["tsx"],
21 | },
22 | "packages/experimental-nextjs-app-support": {
23 | ignoreDependencies: ["graphql", "react-dom"],
24 | },
25 | },
26 | ignore: [
27 | "examples/**",
28 | "integration-test/**",
29 | "packages/test-utils/*.d.ts",
30 | "scripts/**",
31 | "packages/client-react-streaming/api-extractor.d.ts",
32 | "packages/nextjs/api-extractor.d.ts",
33 | "**/.yalc/**",
34 | ],
35 | };
36 |
37 | export default config;
38 |
--------------------------------------------------------------------------------
/packages/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
--------------------------------------------------------------------------------
/packages/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import("@types/eslint").Linter.Config} */
2 | // eslint-disable-next-line no-undef
3 | module.exports = {
4 | env: {
5 | browser: true,
6 | es2021: true,
7 | },
8 | extends: [
9 | "eslint:recommended",
10 | "plugin:react/recommended",
11 | "plugin:react-hooks/recommended",
12 | "plugin:@typescript-eslint/recommended",
13 | ],
14 | settings: {
15 | react: { version: "detect" },
16 | },
17 | overrides: [],
18 | parser: "@typescript-eslint/parser",
19 | parserOptions: {
20 | ecmaVersion: "latest",
21 | sourceType: "module",
22 | },
23 | plugins: ["react", "@typescript-eslint"],
24 | rules: {
25 | "@typescript-eslint/no-explicit-any": "off",
26 | "react/prop-types": "off",
27 | "@typescript-eslint/no-unused-vars": [
28 | "warn",
29 | {
30 | args: "all",
31 | argsIgnorePattern: "^_",
32 | caughtErrors: "all",
33 | caughtErrorsIgnorePattern: "^_",
34 | destructuredArrayIgnorePattern: "^_",
35 | varsIgnorePattern: "^_",
36 | ignoreRestSiblings: true,
37 | },
38 | ],
39 | "@typescript-eslint/consistent-type-imports": [
40 | "error",
41 | {
42 | prefer: "type-imports",
43 | disallowTypeAnnotations: false,
44 | fixStyle: "separate-type-imports",
45 | },
46 | ],
47 | },
48 | };
49 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2023 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/README.md:
--------------------------------------------------------------------------------
1 | # `@apollo/client-react-streaming`
2 |
3 | This package provides building blocks to create framework-level integration of Apollo Client with React's streaming SSR. See the [@apollo/client-integration-nextjs](https://github.com/apollographql/apollo-client-integrations/tree/main/packages/nextjs) package as an example.
4 |
5 | It can also be used to use Apollo Client with a custom streaming SSR setup, e.g. with Vite. See the [vite streaming integration test](https://github.com/apollographql/apollo-client-integrations/tree/main/integration-test/vite-streaming) as an example.
6 |
7 | ## Documentation
8 |
9 | You can find the full API Documentation here:
10 |
11 | [API Documentation](https://github.com/apollographql/apollo-client-integrations/blob/main/docs/client-react-streaming.md)
12 |
13 | We will add more documentation as part of the Apollo Client documentation soon.
14 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/api-extractor.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @packageDocumentation
3 | *
4 | * This package provides building blocks to create framework-level integration of Apollo Client with React's streaming SSR. See the [\@apollo/client-integration-nextjs](https://github.com/apollographql/apollo-client-integrations/tree/main/packages/nextjs) package as an example.
5 | *
6 | * It can also be used to use Apollo Client with a custom streaming SSR setup, e.g. with Vite. See the [vite streaming integration test](https://github.com/apollographql/apollo-client-integrations/tree/main/integration-test/vite-streaming) as an example.
7 | */
8 |
9 | export * from "./dist/combined.d.ts";
10 | export * from "./dist/manual-transport.ssr.d.ts";
11 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3 | "extends": "../../api-extractor.json",
4 | "mainEntryPointFilePath": "./api-extractor.d.ts",
5 | "bundledPackages": [
6 | "@apollo/client-react-streaming",
7 | "@apollo/client-react-streaming/manual-transport"
8 | ],
9 | "compiler": {
10 | "tsconfigFilePath": "./tsconfig.json",
11 | "overrideTsconfig": {
12 | "paths": {
13 | "@apollo/client-react-streaming": ["./dist/combined.d.ts"],
14 | "@apollo/client-react-streaming/manual-transport": [
15 | "./dist/manual-transport.ssr.d.ts"
16 | ]
17 | }
18 | },
19 | "skipLibCheck": true
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/DataTransportAbstraction/backpressuredCallback.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates a callback with backpressure support.
3 | *
4 | * New calls can be made with `callback.push(value)`.
5 | * If a callback is already registered, it will be called directly.
6 | * Otherwise, the calls will be queued until a callback is registered,
7 | * at which point all queued calls will be executed.
8 | *
9 | * The callback can be registered with `callback.register(callback)`.
10 | *
11 | * Registering `null` as a callback will clear the current callback -
12 | * future calls after that will be queued again.
13 | */
14 | export function createBackpressuredCallback() {
15 | const queue: T[] = [];
16 | let push: (value: T) => void = queue.push.bind(queue);
17 | return {
18 | push: (value: T) => push(value),
19 | register: (callback: null | ((value: T) => void)) => {
20 | if (callback) {
21 | push = callback;
22 | while (queue.length) {
23 | callback(queue.shift()!);
24 | }
25 | } else {
26 | push = queue.push.bind(queue);
27 | }
28 | },
29 | };
30 | }
31 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/DataTransportAbstraction/index.ts:
--------------------------------------------------------------------------------
1 | export { InMemoryCache } from "./WrappedInMemoryCache.js";
2 | export { ApolloClient, skipDataTransport } from "./WrappedApolloClient.js";
3 |
4 | export { resetApolloSingletons } from "./testHelpers.js";
5 |
6 | export { DataTransportContext } from "./DataTransportAbstraction.js";
7 | export type {
8 | DataTransportProviderImplementation,
9 | QueryEvent,
10 | } from "./DataTransportAbstraction.js";
11 | export {
12 | WrapApolloProvider,
13 | WrappedApolloProvider,
14 | } from "./WrapApolloProvider.js";
15 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/DataTransportAbstraction/symbols.ts:
--------------------------------------------------------------------------------
1 | export const ApolloClientSingleton = /*#__PURE__*/ Symbol.for(
2 | "ApolloClientSingleton"
3 | );
4 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/DataTransportAbstraction/testHelpers.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClientSingleton } from "./symbols.js";
2 |
3 | /**
4 | * > This export is only available in React Client Components
5 | *
6 | * Resets the singleton instances created for the Apollo SSR data transport and caches.
7 | *
8 | * To be used in testing only, like
9 | * ```ts
10 | * afterEach(resetApolloSingletons);
11 | * ```
12 | *
13 | * @public
14 | */
15 | export function resetApolloSingletons() {
16 | delete window[ApolloClientSingleton];
17 | }
18 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/ManualDataTransport/ApolloRehydrateSymbols.tsx:
--------------------------------------------------------------------------------
1 | import type { DataTransport } from "./dataTransport.js";
2 | import type { RehydrationCache } from "./types.js";
3 |
4 | declare global {
5 | interface Window {
6 | [ApolloSSRDataTransport]?: DataTransport;
7 | [ApolloHookRehydrationCache]?: RehydrationCache;
8 | }
9 | }
10 | export const ApolloSSRDataTransport = /*#__PURE__*/ Symbol.for(
11 | "ApolloSSRDataTransport"
12 | );
13 |
14 | export const ApolloHookRehydrationCache = /*#__PURE__*/ Symbol.for(
15 | "apollo.hookRehydrationCache"
16 | );
17 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/ManualDataTransport/htmlescape.ts:
--------------------------------------------------------------------------------
1 | // --------------------------------------------------------------------------------
2 | //
3 | // copied from
4 | // https://github.com/vercel/next.js/blob/6bc07792a4462a4bf921a72ab30dc4ab2c4e1bda/packages/next/src/server/htmlescape.ts
5 | // License: https://github.com/vercel/next.js/blob/6bc07792a4462a4bf921a72ab30dc4ab2c4e1bda/packages/next/license.md
6 | //
7 | // --------------------------------------------------------------------------------
8 |
9 | // This utility is based on https://github.com/zertosh/htmlescape
10 | // License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
11 |
12 | const ESCAPE_LOOKUP: { [match: string]: string } = {
13 | "&": "\\u0026",
14 | ">": "\\u003e",
15 | "<": "\\u003c",
16 | "\u2028": "\\u2028",
17 | "\u2029": "\\u2029",
18 | };
19 |
20 | const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
21 |
22 | export function htmlEscapeJsonString(str: string): string {
23 | return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
24 | }
25 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/ManualDataTransport/index.ts:
--------------------------------------------------------------------------------
1 | export { buildManualDataTransport } from "./ManualDataTransport.js";
2 | export { registerLateInitializingQueue } from "./lateInitializingQueue.js";
3 | export type { HydrationContextOptions } from "./RehydrationContext.js";
4 |
5 | import {
6 | ApolloHookRehydrationCache,
7 | ApolloSSRDataTransport,
8 | } from "./ApolloRehydrateSymbols.js";
9 | import { resetApolloSingletons } from "@apollo/client-react-streaming";
10 |
11 | /**
12 | * > This export is only available in React Client Components
13 | *
14 | * Resets the singleton instances created for the Apollo SSR data transport and caches.
15 | *
16 | * To be used in testing only, like
17 | * ```ts
18 | * afterEach(resetManualSSRApolloSingletons);
19 | * ```
20 | *
21 | * @public
22 | */
23 | export function resetManualSSRApolloSingletons() {
24 | resetApolloSingletons();
25 | delete window[ApolloHookRehydrationCache];
26 | delete window[ApolloSSRDataTransport];
27 | }
28 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/ManualDataTransport/lateInitializingQueue.ts:
--------------------------------------------------------------------------------
1 | type ValidQueueKeys = {
2 | [K in keyof Window]-?: NonNullable extends {
3 | push(...args: any[]): any;
4 | }
5 | ? K
6 | : never;
7 | }[keyof Window];
8 |
9 | /**
10 | * Registers a queue that can be filled with data before it has actually been initialized with this function.
11 | * Before calling this function, `window[key]` can just be handled as an array of data.
12 | * When calling this funcation, all accumulated data will be passed to the callback.
13 | * After calling this function, `window[key]` will be an object with a `push` method that will call the callback with the data.
14 | *
15 | * @public
16 | */
17 | export function registerLateInitializingQueue(
18 | key: K,
19 | callback: (data: Parameters["push"]>[0]) => void
20 | ) {
21 | const previousData = window[key] || [];
22 | if (Array.isArray(previousData)) {
23 | window[key] = {
24 | push: (...data: any[]) => {
25 | for (const value of data) {
26 | callback(value);
27 | }
28 | },
29 | };
30 | window[key].push(...previousData);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/ManualDataTransport/serialization.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Stringifies a value to be injected into JavaScript "text" - preserves `undefined` values.
3 | */
4 | export function stringify(value: any) {
5 | let undefinedPlaceholder = "$apollo.undefined$";
6 |
7 | const stringified = JSON.stringify(value);
8 | while (stringified.includes(JSON.stringify(undefinedPlaceholder))) {
9 | undefinedPlaceholder = "$" + undefinedPlaceholder;
10 | }
11 | return JSON.stringify(value, (_, v) =>
12 | v === undefined ? undefinedPlaceholder : v
13 | ).replaceAll(JSON.stringify(undefinedPlaceholder), "undefined");
14 | }
15 |
16 | export function revive(value: any): any {
17 | return value;
18 | }
19 |
20 | export type Stringify = typeof stringify;
21 | export type Revive = typeof revive;
22 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/SimulatePreloadedQuery.cc.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | useApolloClient,
5 | useBackgroundQuery,
6 | } from "@apollo/client/react/index.js";
7 | import { useMemo, type ReactNode } from "react";
8 | import {
9 | reviveTransportedQueryRef,
10 | type TransportedQueryRef,
11 | } from "./transportedQueryRef.js";
12 | import { deserializeOptions } from "./DataTransportAbstraction/transportedOptions.js";
13 | import type { PreloadQueryOptions } from "./PreloadQuery.js";
14 |
15 | export default function SimulatePreloadedQuery({
16 | queryRef,
17 | children,
18 | }: {
19 | queryRef: TransportedQueryRef;
20 | children: ReactNode;
21 | }) {
22 | const client = useApolloClient();
23 | reviveTransportedQueryRef(queryRef, client);
24 |
25 | const bgQueryArgs = useMemo>(() => {
26 | const { query, ...hydratedOptions } = deserializeOptions(
27 | queryRef.$__apollo_queryRef.options
28 | ) as PreloadQueryOptions;
29 | return [
30 | query,
31 | { ...hydratedOptions, queryKey: queryRef.$__apollo_queryRef.queryKey },
32 | ] as const;
33 | }, [queryRef.$__apollo_queryRef]);
34 |
35 | useBackgroundQuery(...bgQueryArgs);
36 |
37 | return children;
38 | }
39 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/assertInstance.ts:
--------------------------------------------------------------------------------
1 | import type { bundle } from "./bundleInfo.js";
2 | import { sourceSymbol } from "./bundleInfo.js";
3 |
4 | export function assertInstance(
5 | value: { [sourceSymbol]?: string },
6 | info: typeof bundle,
7 | name: string
8 | ): void {
9 | if (value[sourceSymbol] !== `${info.pkg}:${name}`) {
10 | throw new Error(
11 | `When using \`${name}\` in streaming SSR, you must use the \`${name}\` export provided by \`"${info.pkg}"\`.`
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/bundleInfo.ts:
--------------------------------------------------------------------------------
1 | export const bundle = {
2 | pkg: "@apollo/client-react-streaming",
3 | };
4 |
5 | export const sourceSymbol = Symbol.for("apollo.source_package");
6 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/combined.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * TypeScript does not have the concept of these environments,
3 | * so we need to create a single entry point that combines all
4 | * possible exports.
5 | * That means that users will be offered "RSC" exports in a
6 | * "SSR/Browser" code file, but those will error in a compilation
7 | * step.
8 | *
9 | * This is a limitation of TypeScript, and we can't do anything
10 | * about it.
11 | *
12 | * The build process will only create `.d.ts`/`d.cts` files from
13 | * this, and not actual runtime code.
14 | */
15 |
16 | export * from "./index.rsc.js";
17 | export * from "./index.js";
18 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/empty.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * An empty file that will be used for export conditions on paths where they should just not have a match.
3 | *
4 | * E.g. importing from /ssr in a RSC file will end up being served this file.
5 | */
6 |
7 | export {};
8 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/index.cc.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 |
5 | let RealSimulatePreloadedQuery: typeof import("./SimulatePreloadedQuery.cc.js").default;
6 | export const SimulatePreloadedQuery: typeof import("./SimulatePreloadedQuery.cc.js").default =
7 | (props) => {
8 | if (!RealSimulatePreloadedQuery) {
9 | RealSimulatePreloadedQuery = React.lazy(
10 | () => import("./SimulatePreloadedQuery.cc.js")
11 | );
12 | }
13 | return ;
14 | };
15 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/index.rsc.ts:
--------------------------------------------------------------------------------
1 | export { registerApolloClient } from "./registerApolloClient.js";
2 | export type {
3 | PreloadQueryComponent,
4 | PreloadQueryProps,
5 | } from "./registerApolloClient.js";
6 | export * from "./index.shared.js";
7 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/index.shared.ts:
--------------------------------------------------------------------------------
1 | export { AccumulateMultipartResponsesLink as DebounceMultipartResponsesLink } from "./AccumulateMultipartResponsesLink.js";
2 | export { RemoveMultipartDirectivesLink } from "./RemoveMultipartDirectivesLink.js";
3 | export { SSRMultipartLink } from "./SSRMultipartLink.js";
4 | export {
5 | ApolloClient,
6 | InMemoryCache,
7 | } from "./DataTransportAbstraction/index.js";
8 | export type {
9 | TransportedQueryRef,
10 | PreloadTransportedQueryOptions,
11 | PreloadTransportedQueryFunction,
12 | } from "./transportedQueryRef.js";
13 | export {
14 | createTransportedQueryPreloader,
15 | isTransportedQueryRef,
16 | reviveTransportedQueryRef,
17 | } from "./transportedQueryRef.js";
18 | export {
19 | ReadFromReadableStreamLink,
20 | TeeToReadableStreamLink,
21 | readFromReadableStream,
22 | teeToReadableStream,
23 | type ReadableStreamLinkEvent,
24 | } from "./ReadableStreamLink.js";
25 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./index.shared.js";
2 | export {
3 | resetApolloSingletons,
4 | DataTransportContext,
5 | DataTransportProviderImplementation,
6 | QueryEvent,
7 | WrapApolloProvider,
8 | WrappedApolloProvider,
9 | skipDataTransport,
10 | } from "./DataTransportAbstraction/index.js";
11 | export { useWrapTransportedQueryRef } from "./transportedQueryRef.js";
12 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/stream-utils/JSONTransformStreams.tsx:
--------------------------------------------------------------------------------
1 | export class JSONEncodeStream extends TransformStream> {
2 | constructor() {
3 | super({
4 | transform(chunk, controller) {
5 | controller.enqueue(JSON.stringify(chunk));
6 | },
7 | });
8 | }
9 | }
10 |
11 | export class JSONDecodeStream extends TransformStream<
12 | JsonString | AllowSharedBufferSource,
13 | T
14 | > {
15 | constructor() {
16 | super({
17 | transform(chunk, controller) {
18 | if (typeof chunk !== "string") {
19 | chunk = new TextDecoder().decode(chunk);
20 | }
21 | controller.enqueue(JSON.parse(chunk));
22 | },
23 | });
24 | }
25 | }
26 |
27 | export type JsonString = string & { __jsonString?: [Encoded] };
28 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/stream-utils/combined.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * TypeScript does not have the concept of these environments,
3 | * so we need to create a single entry point that combines all
4 | * possible exports.
5 | * That means that users will be offered "RSC" exports in a
6 | * "SSR/Browser" code file, but those will error in a compilation
7 | * step.
8 | *
9 | * This is a limitation of TypeScript, and we can't do anything
10 | * about it.
11 | *
12 | * The build process will only create `.d.ts`/`d.cts` files from
13 | * this, and not actual runtime code.
14 | */
15 |
16 | export * from "./index.ssr.js";
17 | export * from "./index.js";
18 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/stream-utils/index.shared.ts:
--------------------------------------------------------------------------------
1 | export {
2 | JSONDecodeStream,
3 | JSONEncodeStream,
4 | type JsonString,
5 | } from "./JSONTransformStreams.js";
6 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/stream-utils/index.ssr.ts:
--------------------------------------------------------------------------------
1 | export * from "./index.shared.js";
2 | export { createInjectionTransformStream } from "./createInjectionTransformStream.js";
3 | export { pipeReaderToResponse } from "./pipeReaderToResponse.js";
4 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/stream-utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./index.shared.js";
2 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/src/stream-utils/pipeReaderToResponse.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * > This export is only available in streaming SSR Server environments
3 | *
4 | * Used to pipe a `ReadableStreamDefaultReader` to a `ServerResponse`.
5 | *
6 | * @example
7 | * ```js
8 | * const { injectIntoStream, transformStream } = createInjectionTransformStream();
9 | * const App = render({ assets, injectIntoStream });
10 | * const reactStream = await renderToReadableStream(App, { bootstrapModules }));
11 | * await pipeReaderToResponse(
12 | * reactStream.pipeThrough(transformStream).getReader(),
13 | * response
14 | * );
15 | * ```
16 | */
17 | export async function pipeReaderToResponse(
18 | reader: ReadableStreamDefaultReader,
19 | res: {
20 | write: (chunk: any) => void;
21 | end: () => void;
22 | destroy: (e: Error) => void;
23 | }
24 | ) {
25 | try {
26 | // eslint-disable-next-line no-constant-condition
27 | while (true) {
28 | const { done, value } = await reader.read();
29 | if (done) {
30 | res.end();
31 | return;
32 | } else {
33 | res.write(value);
34 | }
35 | }
36 | } catch (e: any) {
37 | res.destroy(e);
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/client-react-streaming/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "NodeNext",
6 | "target": "esnext",
7 | "rootDir": "src",
8 | "outDir": "dist",
9 | "declaration": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "declarationMap": true,
13 | "types": [
14 | "react/canary",
15 | "node"
16 | ],
17 | "esModuleInterop": true,
18 | "allowSyntheticDefaultImports": true,
19 | "paths": {
20 | "@apollo/client-react-streaming": [
21 | "./src/combined.ts"
22 | ],
23 | "@apollo/client-react-streaming/stream-utils": [
24 | "./src/stream-utils/index.shared.ts"
25 | ]
26 | }
27 | },
28 | "include": [
29 | "src"
30 | ]
31 | }
--------------------------------------------------------------------------------
/packages/client-react-streaming/tsconfig.tests.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "esModuleInterop": false,
5 | "paths": {}
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2023 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | # Apollo Client support for the Next.js App Router
6 |
7 | > ❗️ This package has been renamed and is now available as [@apollo/client-integration-nextjs](https://github.com/apollographql/apollo-client-integrations/blob/main/packages/nextjs), please adjust your imports accordingly.
8 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/empty.cjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | exports.built_for_other = true;
4 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/empty.js:
--------------------------------------------------------------------------------
1 | const built_for_other = true;
2 |
3 | export { built_for_other };
4 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/index.cjs:
--------------------------------------------------------------------------------
1 | module.exports = require("@apollo/client-integration-nextjs");
2 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/index.d.cts:
--------------------------------------------------------------------------------
1 | export * from "./index";
2 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/index.js:
--------------------------------------------------------------------------------
1 | export * from "@apollo/client-integration-nextjs";
2 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/rsc.cjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var base = require("./index.cjs");
4 |
5 | exports.registerApolloClient = base.registerApolloClient;
6 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/rsc.d.cts:
--------------------------------------------------------------------------------
1 | export * from "./rsc.js";
2 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/rsc.d.ts:
--------------------------------------------------------------------------------
1 | export { registerApolloClient } from "./index.js";
2 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/rsc.js:
--------------------------------------------------------------------------------
1 | import * as base from "./index.js";
2 | export const registerApolloClient = base.registerApolloClient;
3 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/ssr.cjs:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var base = require("./index.cjs");
4 | var client = require("@apollo/client");
5 |
6 | exports.ApolloNextAppProvider = base.ApolloNextAppProvider;
7 | exports.DebounceMultipartResponsesLink = base.DebounceMultipartResponsesLink;
8 | exports.NextSSRApolloClient = base.ApolloClient;
9 | exports.NextSSRInMemoryCache = base.InMemoryCache;
10 | exports.RemoveMultipartDirectivesLink = base.RemoveMultipartDirectivesLink;
11 | exports.SSRMultipartLink = base.SSRMultipartLink;
12 | exports.resetNextSSRApolloSingletons = base.resetApolloClientSingletons;
13 | exports.useBackgroundQuery = client.useBackgroundQuery;
14 | exports.useFragment = client.useFragment;
15 | exports.useQuery = client.useQuery;
16 | exports.useReadQuery = client.useReadQuery;
17 | exports.useSuspenseQuery = client.useSuspenseQuery;
18 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/ssr.d.cts:
--------------------------------------------------------------------------------
1 | export * from "./ssr.js";
2 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/redirect/ssr.js:
--------------------------------------------------------------------------------
1 | import * as base from "./index.js";
2 | export const ApolloNextAppProvider = base.ApolloNextAppProvider;
3 | export const DebounceMultipartResponsesLink =
4 | base.DebounceMultipartResponsesLink;
5 | export const NextSSRApolloClient = base.ApolloClient;
6 | export const NextSSRInMemoryCache = base.InMemoryCache;
7 | export const RemoveMultipartDirectivesLink = base.RemoveMultipartDirectivesLink;
8 | export const SSRMultipartLink = base.SSRMultipartLink;
9 | export const resetNextSSRApolloSingletons = base.resetApolloClientSingletons;
10 | export {
11 | useBackgroundQuery,
12 | useFragment,
13 | useQuery,
14 | useReadQuery,
15 | useSuspenseQuery,
16 | } from "@apollo/client/index.js";
17 |
--------------------------------------------------------------------------------
/packages/experimental-nextjs-app-support/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "NodeNext",
6 | "target": "esnext",
7 | "rootDir": "src",
8 | "outDir": "dist",
9 | "declaration": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "declarationMap": true,
13 | "types": [
14 | "react/canary",
15 | "node"
16 | ],
17 | "esModuleInterop": true,
18 | },
19 | "include": [
20 | "redirect"
21 | ]
22 | }
--------------------------------------------------------------------------------
/packages/nextjs/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2023 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/nextjs/api-extractor.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @packageDocumentation
3 | */
4 |
5 | export * from "./dist/combined.d.ts";
6 |
--------------------------------------------------------------------------------
/packages/nextjs/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3 | "extends": "../../api-extractor.json",
4 | "mainEntryPointFilePath": "./api-extractor.d.ts",
5 | "bundledPackages": [
6 | "@apollo/client-react-streaming",
7 | "@apollo/client-react-streaming/manual-transport",
8 | "@apollo/client-integration-nextjs",
9 | "@apollo/client-integration-nextjs/ssr",
10 | "@apollo/client-integration-nextjs/rsc"
11 | ],
12 | "compiler": {
13 | "tsconfigFilePath": "./tsconfig.json",
14 | "skipLibCheck": true
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/nextjs/package-shape.json:
--------------------------------------------------------------------------------
1 | {
2 | "@apollo/client-integration-nextjs": {
3 | "react-server": [
4 | "registerApolloClient",
5 | "DebounceMultipartResponsesLink",
6 | "RemoveMultipartDirectivesLink",
7 | "SSRMultipartLink",
8 | "ApolloClient",
9 | "InMemoryCache",
10 | "built_for_rsc"
11 | ],
12 | "browser": [
13 | "ApolloNextAppProvider",
14 | "DebounceMultipartResponsesLink",
15 | "ApolloClient",
16 | "InMemoryCache",
17 | "RemoveMultipartDirectivesLink",
18 | "SSRMultipartLink",
19 | "resetApolloClientSingletons",
20 | "built_for_browser"
21 | ],
22 | "node": [
23 | "ApolloNextAppProvider",
24 | "DebounceMultipartResponsesLink",
25 | "ApolloClient",
26 | "InMemoryCache",
27 | "RemoveMultipartDirectivesLink",
28 | "SSRMultipartLink",
29 | "resetApolloClientSingletons",
30 | "built_for_ssr"
31 | ],
32 | "edge-light,worker,browser": [
33 | "ApolloNextAppProvider",
34 | "DebounceMultipartResponsesLink",
35 | "ApolloClient",
36 | "InMemoryCache",
37 | "RemoveMultipartDirectivesLink",
38 | "SSRMultipartLink",
39 | "resetApolloClientSingletons",
40 | "built_for_ssr"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/packages/nextjs/src/bundleInfo.ts:
--------------------------------------------------------------------------------
1 | export const bundle = {
2 | pkg: "@apollo/client-integration-nextjs",
3 | client: "ApolloClient",
4 | cache: "InMemoryCache",
5 | };
6 |
--------------------------------------------------------------------------------
/packages/nextjs/src/combined.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * TypeScript does not have the concept of these environments,
3 | * so we need to create a single entry point that combines all
4 | * possible exports.
5 | * That means that users will be offered "RSC" exports in a
6 | * "SSR/Browser" code file, but those will error in a compilation
7 | * step.
8 | *
9 | * This is a limitation of TypeScript, and we can't do anything
10 | * about it.
11 | *
12 | * The build process will only create `.d.ts`/`d.cts` files from
13 | * this, and not actual runtime code.
14 | */
15 |
16 | export * from "./index.rsc.js";
17 | export * from "./index.js";
18 |
--------------------------------------------------------------------------------
/packages/nextjs/src/empty.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * An empty file that will be used for export conditions on paths where they should just not have a match.
3 | *
4 | * E.g. importing from /ssr in a RSC file will end up being served this file.
5 | */
6 | export {};
7 |
--------------------------------------------------------------------------------
/packages/nextjs/src/index.rsc.ts:
--------------------------------------------------------------------------------
1 | export * from "./index.shared.js";
2 | export { registerApolloClient } from "@apollo/client-react-streaming";
3 | export type {
4 | PreloadQueryComponent,
5 | PreloadQueryProps,
6 | } from "@apollo/client-react-streaming";
7 |
--------------------------------------------------------------------------------
/packages/nextjs/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./index.shared.js";
2 | export { ApolloNextAppProvider } from "./ApolloNextAppProvider.js";
3 | import { resetManualSSRApolloSingletons } from "@apollo/client-react-streaming/manual-transport";
4 | /**
5 | * > This export is only available in React Client Components
6 | *
7 | * Resets the singleton instances created for the Apollo SSR data transport and caches.
8 | *
9 | * To be used in testing only, like
10 | * ```ts
11 | * afterEach(resetApolloClientSingletons);
12 | * ```
13 | *
14 | * @public
15 | */
16 | export const resetApolloClientSingletons = resetManualSSRApolloSingletons;
17 |
--------------------------------------------------------------------------------
/packages/nextjs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "NodeNext",
6 | "target": "esnext",
7 | "rootDir": "src",
8 | "outDir": "dist",
9 | "declaration": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "declarationMap": true,
13 | "types": [
14 | "react/canary",
15 | "node"
16 | ],
17 | "esModuleInterop": true,
18 | "paths": {
19 | "@apollo/client-integration-nextjs": [
20 | "./src/combined.ts"
21 | ]
22 | }
23 | },
24 | "include": [
25 | "src"
26 | ]
27 | }
--------------------------------------------------------------------------------
/packages/nextjs/tsconfig.tests.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "esModuleInterop": false,
5 | "paths": {}
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "packages-shared",
3 | "version": "0.0.0",
4 | "private": true,
5 | "devDependencies": {
6 | "@types/eslint": "9.6.1",
7 | "@typescript-eslint/eslint-plugin": "7.5.0",
8 | "@typescript-eslint/parser": "7.5.0",
9 | "eslint": "8.57.0",
10 | "eslint-plugin-react": "7.34.1",
11 | "eslint-plugin-react-hooks": "4.6.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react-router/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @apollo/client-integration-react-router
2 |
3 | ## 0.12.0-alpha.4
4 |
5 | ### Patch Changes
6 |
7 | - 7836098: fix up types for async loaders
8 | - Updated dependencies [3b6eca6]
9 | - @apollo/client-react-streaming@0.12.0-alpha.4
10 |
11 | ## 0.12.0-alpha.3
12 |
13 | ### Patch Changes
14 |
15 | - c1e2415: Fix handling of asynchronous loaders.
16 | - Updated dependencies [c1e2415]
17 | - @apollo/client-react-streaming@0.12.0-alpha.3
18 |
19 | ## 0.12.0-alpha.2
20 |
21 | ### Patch Changes
22 |
23 | - dd2c972: Adjust imports to use the `@apollo/client/react` entrypoint for React-specific imports.
24 | - Updated dependencies [dd2c972]
25 | - @apollo/client-react-streaming@0.12.0-alpha.2
26 |
27 | ## 0.12.0-alpha.1
28 |
29 | ### Patch Changes
30 |
31 | - 2f4890a: Set minimal version of React Router to 7.2.0-pre.3, removes need for patching.
32 | - @apollo/client-react-streaming@0.12.0-alpha.1
33 |
34 | ## 0.12.0-alpha.0
35 |
36 | ### Minor Changes
37 |
38 | - 5417a54: Add a package to support React Router streaming SSR
39 |
40 | ### Patch Changes
41 |
42 | - Updated dependencies [8209093]
43 | - Updated dependencies [20ce0c8]
44 | - Updated dependencies [9a8c872]
45 | - Updated dependencies [563db9b]
46 | - @apollo/client-react-streaming@0.12.0-alpha.0
47 |
--------------------------------------------------------------------------------
/packages/react-router/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2024 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/react-router/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3 | "extends": "../../api-extractor.json",
4 | "mainEntryPointFilePath": "./dist/index.d.ts",
5 | "bundledPackages": [
6 | "@apollo/client-react-streaming",
7 | "@apollo/client-integration-react-router"
8 | ],
9 | "compiler": {
10 | "tsconfigFilePath": "./tsconfig.json",
11 | "skipLibCheck": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react-router/package-shape.json:
--------------------------------------------------------------------------------
1 | {
2 | "@apollo/client-integration-react-router": {
3 | "browser": [
4 | "ApolloClient",
5 | "ApolloHydrationHelper",
6 | "createApolloLoaderHandler",
7 | "built_for_browser"
8 | ],
9 | "node": [
10 | "ApolloClient",
11 | "ApolloHydrationHelper",
12 | "createApolloLoaderHandler",
13 | "built_for_browser"
14 | ]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react-router/src/ApolloHydrationHelper.tsx:
--------------------------------------------------------------------------------
1 | import { useApolloClient } from "@apollo/client/react/index.js";
2 | import * as React from "react";
3 | import { useMatches } from "react-router";
4 | import { hydrateIfNecessary } from "./preloader.js";
5 |
6 | /** @alpha */
7 | export function ApolloHydrationHelper(props: { children: React.ReactNode }) {
8 | const [hydrated] = React.useState(new WeakSet());
9 | const client = useApolloClient();
10 | const matches = useMatches();
11 | React.useMemo(() => {
12 | for (const match of matches) {
13 | const data = match.data;
14 | if (!data || hydrated.has(data)) continue;
15 | hydrated.add(data);
16 |
17 | JSON.stringify(match.data, (_key, value) => {
18 | hydrateIfNecessary(value, client);
19 | return value;
20 | });
21 | }
22 | }, [matches, client, hydrated]);
23 | return props.children;
24 | }
25 |
--------------------------------------------------------------------------------
/packages/react-router/src/importErrors.test.tsx:
--------------------------------------------------------------------------------
1 | import * as assert from "node:assert";
2 | import { test } from "node:test";
3 |
4 | test("tests will follow in a future PR", async () => {
5 | assert.ok(true);
6 | });
7 |
--------------------------------------------------------------------------------
/packages/react-router/src/index.ts:
--------------------------------------------------------------------------------
1 | export { ApolloClient } from "./ApolloClient.js";
2 | export { ApolloHydrationHelper } from "./ApolloHydrationHelper.js";
3 | export { createApolloLoaderHandler } from "./preloader.js";
4 |
--------------------------------------------------------------------------------
/packages/react-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "NodeNext",
6 | "target": "esnext",
7 | "rootDir": "src",
8 | "outDir": "dist",
9 | "declaration": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "declarationMap": true,
13 | "types": [
14 | "react/canary",
15 | "node"
16 | ],
17 | "esModuleInterop": true,
18 | "paths": {
19 | "@apollo/client-integration-react-router": [
20 | "./src/combined.ts"
21 | ]
22 | }
23 | },
24 | "include": [
25 | "src"
26 | ]
27 | }
--------------------------------------------------------------------------------
/packages/react-router/tsconfig.tests.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "esModuleInterop": false,
5 | "paths": {}
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/tanstack-start/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @apollo/client-integration-tanstack-start
2 |
3 | ## 0.12.0-alpha.4
4 |
5 | ### Patch Changes
6 |
7 | - Updated dependencies [3b6eca6]
8 | - @apollo/client-react-streaming@0.12.0-alpha.4
9 |
10 | ## 0.12.0-alpha.3
11 |
12 | ### Patch Changes
13 |
14 | - Updated dependencies [c1e2415]
15 | - @apollo/client-react-streaming@0.12.0-alpha.3
16 |
17 | ## 0.12.0-alpha.2
18 |
19 | ### Patch Changes
20 |
21 | - Updated dependencies [dd2c972]
22 | - @apollo/client-react-streaming@0.12.0-alpha.2
23 |
24 | ## 0.12.0-alpha.1
25 |
26 | ### Patch Changes
27 |
28 | - 7589163: Fix peer dependencies
29 |
30 | pr: #435
31 | author: CarsonF
32 | commit: 472e82b8682897cc7630a48715150685d917bdf2
33 |
34 | - @apollo/client-react-streaming@0.12.0-alpha.1
35 |
36 | ## 0.12.0-alpha.0
37 |
38 | ### Patch Changes
39 |
40 | - Updated dependencies [8209093]
41 | - Updated dependencies [20ce0c8]
42 | - Updated dependencies [9a8c872]
43 | - Updated dependencies [563db9b]
44 | - @apollo/client-react-streaming@0.12.0-alpha.0
45 |
--------------------------------------------------------------------------------
/packages/tanstack-start/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2024 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/tanstack-start/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3 | "extends": "../../api-extractor.json",
4 | "mainEntryPointFilePath": "./dist/index.d.ts",
5 | "bundledPackages": [
6 | "@apollo/client-react-streaming",
7 | "@apollo/client-integration-tanstack-start"
8 | ],
9 | "compiler": {
10 | "tsconfigFilePath": "./tsconfig.json",
11 | "skipLibCheck": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/tanstack-start/package-shape.json:
--------------------------------------------------------------------------------
1 | {
2 | "@apollo/client-integration-tanstack-start": {
3 | "browser": [
4 | "ApolloClient",
5 | "InMemoryCache",
6 | "routerWithApolloClient",
7 | "built_for_browser"
8 | ],
9 | "node": [
10 | "ApolloClient",
11 | "InMemoryCache",
12 | "routerWithApolloClient",
13 | "built_for_browser"
14 | ]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/tanstack-start/src/bundleInfo.ts:
--------------------------------------------------------------------------------
1 | export const bundle = {
2 | pkg: "@apollo/client-integration-tanstack-start",
3 | client: "ApolloClient",
4 | cache: "InMemoryCache",
5 | };
6 |
--------------------------------------------------------------------------------
/packages/tanstack-start/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "NodeNext",
6 | "target": "esnext",
7 | "rootDir": "src",
8 | "outDir": "dist",
9 | "declaration": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "declarationMap": true,
13 | "types": [
14 | "react/canary",
15 | "node"
16 | ],
17 | "esModuleInterop": true,
18 | },
19 | "include": [
20 | "src"
21 | ]
22 | }
--------------------------------------------------------------------------------
/packages/tanstack-start/tsconfig.tests.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "esModuleInterop": false,
5 | "paths": {}
6 | },
7 | "include": ["src"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/test-utils/console.d.ts:
--------------------------------------------------------------------------------
1 | export function silenceConsoleErrors(): {
2 | [Symbol.dispose](): void;
3 | };
4 |
--------------------------------------------------------------------------------
/packages/test-utils/console.js:
--------------------------------------------------------------------------------
1 | export function silenceConsoleErrors() {
2 | const { error } = console;
3 | console.error = () => {};
4 | return {
5 | [Symbol.dispose]() {
6 | console.error = error;
7 | },
8 | };
9 | }
10 |
--------------------------------------------------------------------------------
/packages/test-utils/hydrationTest.d.ts:
--------------------------------------------------------------------------------
1 | /** React completeSegment function */
2 | export function $RS(a: any, b: any): void;
3 | /** React completeBoundary function */
4 | export function $RC(b: any, c: any, e?: any): void;
5 | /**
6 | *
7 | * @param {Parameters[1]} initialChildren
8 | * @param {Parameters[2]} [options]
9 | */
10 | export function hydrateBody(initialChildren: [container: Element | Document, initialChildren: import("react").ReactNode, options?: import("react-dom/client").HydrationOptions][1], options?: [container: Element | Document, initialChildren: import("react").ReactNode, options?: import("react-dom/client").HydrationOptions][2]): import("react-dom/client").Root;
11 | /**
12 | * @param {TemplateStringsArray} html
13 | */
14 | export function setBody(html: TemplateStringsArray): void;
15 | /**
16 | * @param {TemplateStringsArray} html
17 | */
18 | export function appendToBody(html: TemplateStringsArray): void;
19 |
--------------------------------------------------------------------------------
/packages/test-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@internal/test-utils",
3 | "private": true,
4 | "version": "0.0.0",
5 | "dependencies": {
6 | "@testing-library/react-render-stream": "^2.0.0",
7 | "global-jsdom": "^26.0.0",
8 | "react": "^19.0.0",
9 | "react-dom": "^19.0.0",
10 | "typescript": "^5.7.3"
11 | },
12 | "type": "module",
13 | "devDependencies": {
14 | "@types/react": "*",
15 | "@types/react-dom": "*"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/packages/test-utils/react.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * sets up a jsdom environment and returns a render function that can be used to render react components
3 | */
4 | export function browserEnv(): Promise<{
5 | /**
6 | *
7 | * @param {import('react-dom/client').Container} container
8 | * @param {import('react').ReactNode} reactNode
9 | * @param {import('react-dom/client').RootOptions} [rootOptions]
10 | * @returns
11 | */
12 | render(container: import('react-dom/client').Container, reactNode: import('react').ReactNode, rootOptions?: import('react-dom/client').RootOptions): Promise;
13 | [Symbol.dispose]: () => void;
14 | }>;
15 | export function renderStreamEnv(): Promise<{
16 | createRenderStream: typeof import("@testing-library/react-render-stream").createRenderStream;
17 | [Symbol.dispose]: () => void;
18 | }>;
19 |
--------------------------------------------------------------------------------
/packages/test-utils/runInConditions.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @typedef {"react-server" | "node" | "browser" | "default"} Condition
3 | */
4 | /**
5 | * To be used in test files. This will skip the test if the node runner has not been started matching at least one of the passed conditions.
6 | * If node has been started with `node --conditions=node --test`, and `runCondition("node", "browser")` is called, the test will run.
7 | * If node has been started with `node --conditions=react-server --test`, and `runCondition("node", "browser")` is called, the test will not run.
8 | * @param {Condition[]} validConditions
9 | */
10 | export function runInConditions(...validConditions: Condition[]): void;
11 | /**
12 | * @param {Condition[]} validConditions
13 | */
14 | export function outsideOf(...validConditions: Condition[]): boolean;
15 | export type Condition = "react-server" | "node" | "browser" | "default";
16 |
--------------------------------------------------------------------------------
/packages/test-utils/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": [
3 | "./*.js"
4 | ],
5 | "exclude": [
6 | "node_modules"
7 | ],
8 | "compilerOptions": {
9 | "allowJs": true,
10 | "declaration": true,
11 | "emitDeclarationOnly": true,
12 | "outDir": ".",
13 | "declarationMap": false,
14 | "esModuleInterop": true
15 | }
16 | }
--------------------------------------------------------------------------------
/scripts/test-matrix.js:
--------------------------------------------------------------------------------
1 | const { execFileSync } = require("node:child_process");
2 | const semver = require("semver");
3 |
4 | const tags = execFileSync("npm", ["dist-tag", "ls", "@apollo/client"], {
5 | encoding: "utf-8",
6 | }).toString();
7 |
8 | // @ts-ignore
9 | let latest = tags.match(/latest: (.*)/)[1];
10 | // @ts-ignore
11 | let next = tags.match(/next: (.*)/)[1];
12 |
13 | if (semver.gt(next, latest)) {
14 | console.log('matrix=["next","latest"]');
15 | } else {
16 | console.log('matrix=["latest"]');
17 | }
18 |
--------------------------------------------------------------------------------
/scripts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/recommended/tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "NodeNext",
6 | "target": "esnext",
7 | "noEmit": true,
8 | "checkJs": true
9 | }
10 | }
11 |
--------------------------------------------------------------------------------