Skip to content

Commit

Permalink
fix lints
Browse files Browse the repository at this point in the history
  • Loading branch information
lemonmade committed Jun 1, 2024
1 parent 2130cb3 commit 32eace3
Showing 1 changed file with 25 additions and 25 deletions.
50 changes: 25 additions & 25 deletions packages/graphql/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,14 @@
import {
createGraphQLHttpFetch,
type GraphQLHttpFetchOptions,
} from "@quilted/graphql";
} from '@quilted/graphql';

// becomes:

import {
createGraphQLFetchOverHTTP,
type GraphQLFetchOverHTTPOptions,
} from "@quilted/graphql";
} from '@quilted/graphql';
```

This change is being made as part of a larger effort to use uppercase letters for acronyms and initialisms.
Expand Down Expand Up @@ -206,88 +206,88 @@

```ts
// This all applies for createGraphQLHttpStreamingFetch, too
import { createGraphQLHttpFetch } from "@quilted/graphql";
import {createGraphQLHttpFetch} from '@quilted/graphql';

// Importing `.graphql` files automatically generates hashed
// identifiers for your operations. If you don’t use this feature,
// you must pass the identifier yourself.
import myQuery from "./MyQuery.graphql";
import myQuery from './MyQuery.graphql';

const fetch = createGraphQLHttpFetch({
source: false,
url: "https://my-app.com/query",
url: 'https://my-app.com/query',
});

const { data } = await fetch(myQuery);
const {data} = await fetch(myQuery);
```

This isn’t typically useful unless you also communicate the operation’s hash identifier. Here’s an example showing how you could pass the identifier as an additional URL parameter:

```ts
import { createGraphQLHttpFetch } from "@quilted/graphql";
import myQuery from "./MyQuery.graphql";
import {createGraphQLHttpFetch} from '@quilted/graphql';
import myQuery from './MyQuery.graphql';

const fetch = createGraphQLHttpFetch({
source: false,
url(operation) {
const url = new URL("https://my-app.com/query");
url.searchParams.set("id", operation.id);
const url = new URL('https://my-app.com/query');
url.searchParams.set('id', operation.id);
return url;
},
});

const { data } = await fetch(myQuery);
const {data} = await fetch(myQuery);
```

Here’s an alternative approach, which sends the operation using a GraphQL `extensions` field, according to Apollo’s [automatic persisted queries protocol](https://www.google.com/search?client=safari&rls=en&q=apollo+autoamtic+persisted+queries&ie=UTF-8&oe=UTF-8):

```ts
import { createGraphQLHttpFetch } from "@quilted/graphql";
import myQuery from "./MyQuery.graphql";
import {createGraphQLHttpFetch} from '@quilted/graphql';
import myQuery from './MyQuery.graphql';

const fetch = createGraphQLHttpFetch({
source: false,
url: "https://my-app.com/query",
url: 'https://my-app.com/query',
extensions(operation) {
return {
persistedQuery: { version: 1, sha256Hash: operation.id },
persistedQuery: {version: 1, sha256Hash: operation.id},
};
},
});

const { data } = await fetch(myQuery);
const {data} = await fetch(myQuery);
```

These `source` and `extension` options can be set globally, as shown above, or per-fetch:

```ts
import { createGraphQLHttpFetch } from "@quilted/graphql";
import myQuery from "./MyQuery.graphql";
import {createGraphQLHttpFetch} from '@quilted/graphql';
import myQuery from './MyQuery.graphql';

const fetch = createGraphQLHttpFetch({
url: "https://my-app.com/query",
url: 'https://my-app.com/query',
});

const { data } = await fetch(myQuery, {
const {data} = await fetch(myQuery, {
source: false,
extensions: {
persistedQuery: { version: 1, sha256Hash: myQuery.id },
persistedQuery: {version: 1, sha256Hash: myQuery.id},
},
});
```

You can also now set the `method`, `url`, and `headers` options per fetch. The example below shows how you can set the `method` to `GET` for a single GraphQL operation:

```ts
import { createGraphQLHttpFetch } from "@quilted/graphql";
import {createGraphQLHttpFetch} from '@quilted/graphql';

const fetch = createGraphQLHttpFetch({
url: "https://my-app.com/query",
url: 'https://my-app.com/query',
});

const { data } = await fetch(`{ me { name } }`, {
const {data} = await fetch(`{ me { name } }`, {
// Default is POST, but this query will run as a GET
method: "GET",
method: 'GET',
});
```

Expand Down

0 comments on commit 32eace3

Please sign in to comment.