Skip to content

Update HttpLink types for fetchOptions and credentials #12820

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.

Sign up for GitHub

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

Merged
jerelmiller merged 5 commits into from
Aug 5, 2025
Merged

Update HttpLink types for fetchOptions and credentials #12820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9dffd77
Fix type of credentials and fetchOptions
jerelmiller Aug 4, 2025
1b313e1
Add changeset
jerelmiller Aug 4, 2025
149f55a
Update api report
jerelmiller Aug 4, 2025
95c1793
Update size limits
jerelmiller Aug 4, 2025
daaadf2
Fix tests that fail type checks
jerelmiller Aug 4, 2025
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
4 changes: 2 additions & 2 deletions .api-reports/api-report-link_http.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,9 @@ export namespace HttpLink {
preserveHeaderCase?: boolean;
}
export interface Options {
credentials?: string;
credentials?: RequestCredentials;
fetch?: typeof fetch;
fetchOptions?: any;
fetchOptions?: RequestInit;
headers?: Record<string, string>;
includeExtensions?: boolean;
includeUnusedVariables?: boolean;
Expand Down
4 changes: 2 additions & 2 deletions .api-reports/api-report.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1370,9 +1370,9 @@ export namespace HttpLink {
preserveHeaderCase?: boolean;
}
export interface Options {
credentials?: string;
credentials?: RequestCredentials;
fetch?: typeof fetch;
fetchOptions?: any;
fetchOptions?: RequestInit;
headers?: Record<string, string>;
includeExtensions?: boolean;
includeUnusedVariables?: boolean;
Expand Down
5 changes: 5 additions & 0 deletions .changeset/purple-eyes-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@apollo/client": patch
---

The `fetchOptions` option provided to `HttpLink` and `BatchHttpLink` is now `RequestInit` instead of `any`. The `credentials` option is now a `RequestCredentials` type instead of a `string`.
8 changes: 4 additions & 4 deletions .size-limits.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 43862,
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38777,
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33487,
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27626
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 43890,
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38731,
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33462,
"import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27595
}
25 changes: 12 additions & 13 deletions src/link/batch-http/__tests__/batchHttpLink.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,7 +719,7 @@ describe("SharedHttpTest", () => {
const variables = { params: "stub" };
const link = new BatchHttpLink({
uri: "/data",
credentials: "same-team-yo",
credentials: "include",
});

const stream = new ObservableStream(
Expand All @@ -730,19 +730,19 @@ describe("SharedHttpTest", () => {
await expect(stream).toComplete();

const creds = fetchMock.lastCall()![1]!.credentials;
expect(creds).toBe("same-team-yo");
expect(creds).toBe("include");
});

it("prioritizes creds from the context over the setup", async () => {
const variables = { params: "stub" };
const middleware = new ApolloLink((operation, forward) => {
operation.setContext({
credentials: "same-team-yo",
credentials: "omit",
});
return forward(operation);
});
const link = middleware.concat(
new BatchHttpLink({ uri: "/data", credentials: "error" })
new BatchHttpLink({ uri: "/data", credentials: "include" })
);

const stream = new ObservableStream(
Expand All @@ -753,7 +753,7 @@ describe("SharedHttpTest", () => {
await expect(stream).toComplete();

const creds = fetchMock.lastCall()![1]!.credentials;
expect(creds).toBe("same-team-yo");
expect(creds).toBe("omit");
});

it("adds uri to the request from the context", async () => {
Expand Down Expand Up @@ -801,7 +801,7 @@ describe("SharedHttpTest", () => {
return forward(operation);
});
const link = middleware.concat(
new BatchHttpLink({ uri: "/data", credentials: "error" })
new BatchHttpLink({ uri: "/data", credentials: "include" })
);

const stream = new ObservableStream(
Expand Down Expand Up @@ -839,7 +839,7 @@ describe("SharedHttpTest", () => {
const variables = { params: "stub" };
const link = new BatchHttpLink({
uri: "/data",
fetchOptions: { someOption: "foo", mode: "no-cors" },
fetchOptions: { mode: "no-cors" },
});

const stream = new ObservableStream(
Expand All @@ -849,8 +849,7 @@ describe("SharedHttpTest", () => {
await expect(stream).toEmitTypedValue(data);
await expect(stream).toComplete();

const { someOption, mode, headers } = fetchMock.lastCall()![1]! as any;
expect(someOption).toBe("foo");
const { mode, headers } = fetchMock.lastCall()![1]! as any;
expect(mode).toBe("no-cors");
expect(headers["content-type"]).toBe("application/json");
});
Expand Down Expand Up @@ -902,13 +901,13 @@ describe("SharedHttpTest", () => {
const middleware = new ApolloLink((operation, forward) => {
operation.setContext({
fetchOptions: {
someOption: "foo",
mode: "cors",
},
});
return forward(operation);
});
const link = middleware.concat(
new BatchHttpLink({ uri: "/data", fetchOptions: { someOption: "bar" } })
new BatchHttpLink({ uri: "/data", fetchOptions: { mode: "no-cors" } })
);

const stream = new ObservableStream(
Expand All @@ -918,8 +917,8 @@ describe("SharedHttpTest", () => {
await expect(stream).toEmitTypedValue(data);
await expect(stream).toComplete();

const { someOption } = fetchMock.lastCall()![1]! as any;
expect(someOption).toBe("foo");
const { mode } = fetchMock.lastCall()![1]! as any;
expect(mode).toBe("cors");
});

it("allows for not sending the query with the request", async () => {
Expand Down
4 changes: 2 additions & 2 deletions src/link/http/HttpLink.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,12 @@ export declare namespace HttpLink {
/**
* The credentials policy you want to use for the fetch call.
*/
credentials?: string;
credentials?: RequestCredentials;

/**
* Any overrides of the fetch options argument to pass to the fetch call.
*/
fetchOptions?: any;
fetchOptions?: RequestInit;

/**
* If set to true, use the HTTP GET method for query operations. Mutations
Expand Down
25 changes: 12 additions & 13 deletions src/link/http/__tests__/HttpLink.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -709,27 +709,27 @@ describe("HttpLink", () => {

it("adds creds to the request from the setup", async () => {
const variables = { params: "stub" };
const link = createHttpLink({ uri: "data", credentials: "same-team-yo" });
const link = createHttpLink({ uri: "data", credentials: "include" });

const observable = execute(link, { query: sampleQuery, variables });
const stream = new ObservableStream(observable);

await expect(stream).toEmitTypedValue(data);

const creds = fetchMock.lastCall()![1]!.credentials;
expect(creds).toBe("same-team-yo");
expect(creds).toBe("include");
});

it("prioritizes creds from the context over the setup", async () => {
const variables = { params: "stub" };
const middleware = new ApolloLink((operation, forward) => {
operation.setContext({
credentials: "same-team-yo",
credentials: "omit",
});
return forward(operation);
});
const link = middleware.concat(
createHttpLink({ uri: "data", credentials: "error" })
createHttpLink({ uri: "data", credentials: "include" })
);

const observable = execute(link, { query: sampleQuery, variables });
Expand All @@ -738,7 +738,7 @@ describe("HttpLink", () => {
await expect(stream).toEmitTypedValue(data);

const creds = fetchMock.lastCall()![1]!.credentials;
expect(creds).toBe("same-team-yo");
expect(creds).toBe("omit");
});

it("adds uri to the request from the context", async () => {
Expand Down Expand Up @@ -782,7 +782,7 @@ describe("HttpLink", () => {
return forward(operation);
});
const link = middleware.concat(
createHttpLink({ uri: "data", credentials: "error" })
createHttpLink({ uri: "data", credentials: "include" })
);

const observable = execute(link, { query: sampleQuery, variables });
Expand Down Expand Up @@ -817,16 +817,15 @@ describe("HttpLink", () => {
const variables = { params: "stub" };
const link = createHttpLink({
uri: "data",
fetchOptions: { someOption: "foo", mode: "no-cors" },
fetchOptions: { mode: "no-cors" },
});

const observable = execute(link, { query: sampleQuery, variables });
const stream = new ObservableStream(observable);

await expect(stream).toEmitTypedValue(data);

const { someOption, mode, headers } = fetchMock.lastCall()![1] as any;
expect(someOption).toBe("foo");
const { mode, headers } = fetchMock.lastCall()![1] as any;
expect(mode).toBe("no-cors");
expect(headers["content-type"]).toBe("application/json");
});
Expand Down Expand Up @@ -914,22 +913,22 @@ describe("HttpLink", () => {
const middleware = new ApolloLink((operation, forward) => {
operation.setContext({
fetchOptions: {
someOption: "foo",
mode: "cors",
},
});
return forward(operation);
});
const link = middleware.concat(
createHttpLink({ uri: "data", fetchOptions: { someOption: "bar" } })
createHttpLink({ uri: "data", fetchOptions: { mode: "no-cors" } })
);

const observable = execute(link, { query: sampleQuery, variables });
const stream = new ObservableStream(observable);

await expect(stream).toEmitTypedValue(data);

const { someOption } = fetchMock.lastCall()![1] as any;
expect(someOption).toBe("foo");
const { mode } = fetchMock.lastCall()![1] as any;
expect(mode).toBe("cors");
});

it("allows for not sending the query with the request", async () => {
Expand Down