Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add shared @apollo/experimental-nextjs-app-support entry point #300

Merged
merged 7 commits into from
May 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 9 additions & 10 deletions .size-limit.cjs
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/** @type {import('size-limit').SizeLimitConfig} */
const checks = [
{
name: "{ ApolloNextAppProvider, NextSSRApolloClient, NextSSRInMemoryCache } from '@apollo/experimental-nextjs-app-support/ssr' (Browser ESM)",
path: "packages/experimental-nextjs-app-support/dist/ssr/index.browser.js",
import:
"{ ApolloNextAppProvider, NextSSRApolloClient, NextSSRInMemoryCache }",
name: "{ ApolloNextAppProvider, ApolloClient, InMemoryCache } from '@apollo/experimental-nextjs-app-support' (Browser ESM)",
path: "packages/experimental-nextjs-app-support/dist/index.browser.js",
import: "{ ApolloNextAppProvider, ApolloClient, InMemoryCache }",
},
{
name: "{ WrapApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client-react-streaming' (Browser ESM)",
Expand Down Expand Up @@ -37,16 +36,16 @@ const checks = [
path: "packages/client-react-streaming/dist/manual-transport.ssr.cjs",
},
{
name: "@apollo/experimental-nextjs-app-support/ssr (Browser ESM)",
path: "packages/experimental-nextjs-app-support/dist/ssr/index.browser.js",
name: "@apollo/experimental-nextjs-app-support (Browser ESM)",
path: "packages/experimental-nextjs-app-support/dist/index.browser.js",
},
{
name: "@apollo/experimental-nextjs-app-support/ssr (SSR ESM)",
path: "packages/experimental-nextjs-app-support/dist/ssr/index.ssr.js",
name: "@apollo/experimental-nextjs-app-support (SSR ESM)",
path: "packages/experimental-nextjs-app-support/dist/index.ssr.js",
},
{
name: "@apollo/experimental-nextjs-app-support/ssr (RSC ESM)",
path: "packages/experimental-nextjs-app-support/dist/ssr/index.rsc.js",
name: "@apollo/experimental-nextjs-app-support (RSC ESM)",
path: "packages/experimental-nextjs-app-support/dist/index.rsc.js",
},
{
name: "@apollo/experimental-nextjs-app-support/rsc (RSC ESM)",
Expand Down
4 changes: 2 additions & 2 deletions docs/client-react-streaming.buildmanualdatatransport.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Creates a "manual" Data Transport, to be used with `WrapApolloProvider`<!-- -->.
**Signature:**

```typescript
buildManualDataTransport: (args: BuildArgs) => DataTransportProviderImplementation<HydrationContextOptions>
buildManualDataTransport: (args: ManualDataTransportOptions) => DataTransportProviderImplementation<HydrationContextOptions>
```

## Parameters
Expand Down Expand Up @@ -39,7 +39,7 @@ args

</td><td>

BuildArgs
ManualDataTransportOptions


</td><td>
Expand Down
4 changes: 3 additions & 1 deletion docs/client-react-streaming.queryevent.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ Events that will be emitted by a wrapped ApolloClient instance during SSR on `Da
```typescript
type QueryEvent = {
type: "started";
options: WatchQueryOptions;
options: {
query: string;
} & Omit<WatchQueryOptions, "query">;
id: TransportIdentifier;
} | {
type: "data";
Expand Down
17 changes: 17 additions & 0 deletions docs/experimental-nextjs-app-support.apolloclient.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [ApolloClient](./experimental-nextjs-app-support.apolloclient.md)

## ApolloClient class

A version of `ApolloClient` to be used with streaming SSR or in React Server Components.

For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient)<!-- -->.

**Signature:**

```typescript
declare class ApolloClient<TCacheShape> extends ApolloClient$1<TCacheShape>
```
**Extends:** ApolloClient$1&lt;TCacheShape&gt;

9 changes: 6 additions & 3 deletions docs/experimental-nextjs-app-support.apollonextappprovider.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ A version of `ApolloProvider` to be used with the Next.js App Router.

As opposed to the normal `ApolloProvider`<!-- -->, this version does not require a `client` prop, but requires a `makeClient` prop instead.

Use this component together with `NextSSRApolloClient` and `NextSSRInMemoryCache` to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router.
Use this component together with `ApolloClient` and `InMemoryCache` from the `@apollo/experimental-nextjs-app-support` package to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router.

**Signature:**

Expand All @@ -23,13 +23,16 @@ ApolloNextAppProvider: _apollo_client_react_streaming.WrappedApolloProvider<_apo
`app/ApolloWrapper.jsx`

```tsx
import { HttpLink } from "@apollo/client";
import { ApolloNextAppProvider, ApolloClient, InMemoryCache } from "@apollo/experimental-nextjs-app-support";

function makeClient() {
const httpLink = new HttpLink({
uri: "https://example.com/api/graphql",
});

return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
return new ApolloClient({
cache: new InMemoryCache(),
link: httpLink,
});
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [NextSSRInMemoryCache](./experimental-nextjs-app-support.nextssrinmemorycache.md)
[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [InMemoryCache](./experimental-nextjs-app-support.inmemorycache.md)

## NextSSRInMemoryCache class
## InMemoryCache class

A version of `InMemoryCache` to be used with streaming SSR.

Expand Down
22 changes: 11 additions & 11 deletions docs/experimental-nextjs-app-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,35 +20,35 @@ Description
</th></tr></thead>
<tbody><tr><td>

[DebounceMultipartResponsesLink](./experimental-nextjs-app-support.debouncemultipartresponseslink.md)
[ApolloClient](./experimental-nextjs-app-support.apolloclient.md)


</td><td>

This link can be used to "debounce" the initial response of a multipart request. Any incremental data received during the `cutoffDelay` time will be merged into the initial response.

After `cutoffDelay`<!-- -->, the link will return the initial response, even if there is still incremental data pending, and close the network connection.
A version of `ApolloClient` to be used with streaming SSR or in React Server Components.

If `cutoffDelay` is `0`<!-- -->, the link will immediately return data as soon as it is received, without waiting for incremental data, and immediately close the network connection.
For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient)<!-- -->.


</td></tr>
<tr><td>

[NextSSRApolloClient](./experimental-nextjs-app-support.nextssrapolloclient.md)
[DebounceMultipartResponsesLink](./experimental-nextjs-app-support.debouncemultipartresponseslink.md)


</td><td>

A version of `ApolloClient` to be used with streaming SSR.
This link can be used to "debounce" the initial response of a multipart request. Any incremental data received during the `cutoffDelay` time will be merged into the initial response.

For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient)<!-- -->.
After `cutoffDelay`<!-- -->, the link will return the initial response, even if there is still incremental data pending, and close the network connection.

If `cutoffDelay` is `0`<!-- -->, the link will immediately return data as soon as it is received, without waiting for incremental data, and immediately close the network connection.


</td></tr>
<tr><td>

[NextSSRInMemoryCache](./experimental-nextjs-app-support.nextssrinmemorycache.md)
[InMemoryCache](./experimental-nextjs-app-support.inmemorycache.md)


</td><td>
Expand Down Expand Up @@ -139,7 +139,7 @@ Ensures that you can always access the same instance of ApolloClient during RSC
</td></tr>
<tr><td>

[resetNextSSRApolloSingletons()](./experimental-nextjs-app-support.resetnextssrapollosingletons.md)
[resetApolloClientSingletons()](./experimental-nextjs-app-support.resetapolloclientsingletons.md)


</td><td>
Expand Down Expand Up @@ -184,7 +184,7 @@ A version of `ApolloProvider` to be used with the Next.js App Router.

As opposed to the normal `ApolloProvider`<!-- -->, this version does not require a `client` prop, but requires a `makeClient` prop instead.

Use this component together with `NextSSRApolloClient` and `NextSSRInMemoryCache` to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router.
Use this component together with `ApolloClient` and `InMemoryCache` from the `@apollo/experimental-nextjs-app-support` package to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router.


</td></tr>
Expand Down
17 changes: 0 additions & 17 deletions docs/experimental-nextjs-app-support.nextssrapolloclient.md

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [resetNextSSRApolloSingletons](./experimental-nextjs-app-support.resetnextssrapollosingletons.md)
[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [resetApolloClientSingletons](./experimental-nextjs-app-support.resetapolloclientsingletons.md)

## resetNextSSRApolloSingletons() function
## resetApolloClientSingletons() function

&gt; This export is only available in React Client Components

Expand Down
10 changes: 5 additions & 5 deletions examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
import { ApolloLink, HttpLink } from "@apollo/client";
import {
ApolloNextAppProvider,
NextSSRInMemoryCache,
NextSSRApolloClient,
InMemoryCache,
ApolloClient,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
} from "@apollo/experimental-nextjs-app-support";
import { setVerbosity } from "ts-invariant";

setVerbosity("debug");
Expand All @@ -17,8 +17,8 @@ function makeClient() {
fetchOptions: { cache: "no-store" },
});

return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
return new ApolloClient({
cache: new InMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
Expand Down
6 changes: 1 addition & 5 deletions examples/app-dir-experiments/app/ssr/page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
"use client";
import React, { Suspense } from "react";
import {
useFragment,
useQuery,
useSuspenseQuery,
} from "@apollo/experimental-nextjs-app-support/ssr";
import { useFragment, useQuery, useSuspenseQuery } from "@apollo/client";
import { gql } from "@apollo/client";
import { HtmlChangesObserver } from "@/components/HtmlChangesObserver";

Expand Down
10 changes: 5 additions & 5 deletions examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { ApolloLink, HttpLink } from "@apollo/client";
import clientCookies from "js-cookie";
import {
ApolloNextAppProvider,
NextSSRInMemoryCache,
NextSSRApolloClient,
InMemoryCache,
ApolloClient,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
} from "@apollo/experimental-nextjs-app-support";

import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
import { setVerbosity } from "ts-invariant";
Expand Down Expand Up @@ -68,8 +68,8 @@ export function ApolloWrapper({
])
: ApolloLink.from([delayLink, httpLink]);

return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
return new ApolloClient({
cache: new InMemoryCache(),
link,
});
}
Expand Down
3 changes: 1 addition & 2 deletions examples/hack-the-supergraph-ssr/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@

import ProductCard from "../components/ProductCard";
import { Heading, SimpleGrid, Stack, Text, VStack } from "@chakra-ui/react";
import { gql, TypedDocumentNode } from "@apollo/client";
import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
import { useSuspenseQuery, gql, TypedDocumentNode } from "@apollo/client";

const GET_LATEST_PRODUCTS: TypedDocumentNode<{
products: { id: string }[];
Expand Down
2 changes: 1 addition & 1 deletion examples/hack-the-supergraph-ssr/app/product/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
Text,
} from "@chakra-ui/react";
import { gql, TypedDocumentNode } from "@apollo/client";
import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
import { useSuspenseQuery } from "@apollo/client";

const GET_PRODUCT_DETAILS: TypedDocumentNode<{
product: {
Expand Down
3 changes: 1 addition & 2 deletions examples/hack-the-supergraph-ssr/components/ProductCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ import {
usePrefersReducedMotion,
} from "@chakra-ui/react";
import Link from "next/link";
import { TypedDocumentNode, gql } from "@apollo/client";
import { useFragment } from "@apollo/experimental-nextjs-app-support/ssr";
import { useFragment, TypedDocumentNode, gql } from "@apollo/client";

const ProductCardProductFragment: TypedDocumentNode<{
id: string;
Expand Down
10 changes: 5 additions & 5 deletions examples/polls-demo/app/cc/apollo-wrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { ApolloLink, HttpLink } from "@apollo/client";
import {
NextSSRApolloClient,
ApolloClient,
ApolloNextAppProvider,
NextSSRInMemoryCache,
InMemoryCache,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
} from "@apollo/experimental-nextjs-app-support";
import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
import { setVerbosity } from "ts-invariant";

Expand All @@ -21,8 +21,8 @@ function makeClient() {
uri: "https://apollo-next-poll.up.railway.app/",
});

return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
return new ApolloClient({
cache: new InMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
Expand Down
6 changes: 1 addition & 5 deletions examples/polls-demo/app/cc/poll-cc.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
"use client";
import { Suspense } from "react";
import {
useReadQuery,
useBackgroundQuery,
} from "@apollo/experimental-nextjs-app-support/ssr";
import { useMutation } from "@apollo/client";
import { useReadQuery, useBackgroundQuery, useMutation } from "@apollo/client";
import { QueryReference } from "@apollo/client/react";
import { Poll as PollInner } from "@/components/poll";

Expand Down
18 changes: 11 additions & 7 deletions integration-test/jest/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { Suspense, useState } from "react";
import {
ApolloNextAppProvider,
NextSSRApolloClient,
NextSSRInMemoryCache,
useSuspenseQuery,
} from "@apollo/experimental-nextjs-app-support/ssr";
ApolloClient,
InMemoryCache,
} from "@apollo/experimental-nextjs-app-support";
import { SchemaLink } from "@apollo/client/link/schema/index.js";
import { gql, ApolloLink, Observable } from "@apollo/client/index.js";
import {
useSuspenseQuery,
gql,
ApolloLink,
Observable,
} from "@apollo/client/index.js";
import { schema } from "./schema";

const delayLink = new ApolloLink((operation, forward) => {
Expand All @@ -22,8 +26,8 @@ const delayLink = new ApolloLink((operation, forward) => {
});

export const makeClient = () => {
return new NextSSRApolloClient({
cache: new NextSSRInMemoryCache(),
return new ApolloClient({
cache: new InMemoryCache(),
link: delayLink.concat(new SchemaLink({ schema })),
});
};
Expand Down
4 changes: 2 additions & 2 deletions integration-test/jest/src/App.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom";

import App from "./App";
import { resetNextSSRApolloSingletons } from "@apollo/experimental-nextjs-app-support/ssr";
import { resetApolloClientSingletons } from "@apollo/experimental-nextjs-app-support";

afterEach(resetNextSSRApolloSingletons);
afterEach(resetApolloClientSingletons);

test("loads data", async () => {
render(<App />);
Expand Down
Loading
Loading