useSuspenseQuery initiates a network request and causes the component calling it to suspend while the request is in flight. It can be thought of as a drop-in replacement for useQuery that allows you to take advantage of React's concurrent features while fetching during render.
Consider a Dog component that fetches and renders some information about a dog named Mozzarella:
import { Suspense } from 'react';
import { gql, TypedDocumentNode, useSuspenseQuery } from '@apollo/client';
useSuspenseQuery initiates a network request and causes the component calling it to suspend while the request is in flight. It can be thought of as a drop-in replacement for useQuery that allows you to take advantage of React's concurrent features while fetching during render.
Consider a Dog component that fetches and renders some information about a dog named Mozzarella:
import { Suspense } from 'react';
import { gql, TypedDocumentNode, useSuspenseQuery } from '@apollo/client';
Dependabot commands
You can trigger Dependabot actions by commenting on this MR
$dependabot recreate will recreate this MR rewriting all the manual changes and resolving conflicts
Bumps [@apollo/client](https://github.com/apollographql/apollo-client) from 3.7.17 to 3.8.0.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a href="https://github.com/apollographql/apollo-client/releases"><code>@apollo/client</code>'s releases</a>.</em></p>
<blockquote>
<h2>v3.8.0</h2>
<h3>Minor Changes</h3>
<h4>Fetching with Suspense 🎉</h4>
<ul>
<li>
<p><a href="https://github.com/apollographql/apollo-client/pull/10323">#10323</a> <a href="https://github.com/apollographql/apollo-client/commit/64cb88a4b6be8640c4e0d753dd06ddf4c25a2bc3"><code>64cb88a4b</code></a> Thanks <a href="https://github.com/jerelmiller"><code>@jerelmiller</code></a>! - Add support for React suspense with a new <code>useSuspenseQuery</code> hook.</p>
<p><code>useSuspenseQuery</code> initiates a network request and causes the component calling it to suspend while the request is in flight. It can be thought of as a drop-in replacement for <code>useQuery</code> that allows you to take advantage of React's concurrent features while fetching during render.</p>
<p>Consider a <code>Dog</code> component that fetches and renders some information about a dog named Mozzarella:</p>
<!-- raw HTML omitted -->
<pre lang="tsx"><code>import { Suspense } from 'react';
import { gql, TypedDocumentNode, useSuspenseQuery } from '@apollo/client';
<p>interface Data {
dog: {
id: string;
name: string;
};
}</p>
<p>interface Variables {
name: string;
}</p>
<p>const GET_DOG_QUERY: TypedDocumentNode<Data, Variables> = gql<code>query GetDog($name: String) { dog(name: $name) { id name } }</code>;</p>
<p>function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Dog name="Mozzarella" />
</Suspense>
);
}</p>
<p>function Dog({ name }: { name: string }) {
const { data } = useSuspenseQuery(GET_DOG_QUERY, {
variables: { name },
});
</code></pre></p>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a href="https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md"><code>@apollo/client</code>'s changelog</a>.</em></p>
<blockquote>
<h2>3.8.0</h2>
<h3>Minor Changes</h3>
<h4>Fetching with Suspense 🎉</h4>
<ul>
<li>
<p><a href="https://github.com/apollographql/apollo-client/pull/10323">#10323</a> <a href="https://github.com/apollographql/apollo-client/commit/64cb88a4b6be8640c4e0d753dd06ddf4c25a2bc3"><code>64cb88a4b</code></a> Thanks <a href="https://github.com/jerelmiller"><code>@jerelmiller</code></a>! - Add support for React suspense with a new <code>useSuspenseQuery</code> hook.</p>
<p><code>useSuspenseQuery</code> initiates a network request and causes the component calling it to suspend while the request is in flight. It can be thought of as a drop-in replacement for <code>useQuery</code> that allows you to take advantage of React's concurrent features while fetching during render.</p>
<p>Consider a <code>Dog</code> component that fetches and renders some information about a dog named Mozzarella:</p>
<!-- raw HTML omitted -->
<pre lang="tsx"><code>import { Suspense } from 'react';
import { gql, TypedDocumentNode, useSuspenseQuery } from '@apollo/client';
<p>interface Data {
dog: {
id: string;
name: string;
};
}</p>
<p>interface Variables {
name: string;
}</p>
<p>const GET_DOG_QUERY: TypedDocumentNode<Data, Variables> = gql<code>query GetDog($name: String) { dog(name: $name) { id name } }</code>;</p>
<p>function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Dog name="Mozzarella" />
</Suspense>
);
}</p>
<p>function Dog({ name }: { name: string }) {
const { data } = useSuspenseQuery(GET_DOG_QUERY, {
variables: { name },
</code></pre></p>
</li>
</ul>
<!-- raw HTML omitted -->
</blockquote>
<p>... (truncated)</p>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a href="https://github.com/apollographql/apollo-client/commit/1ac6ddab2410b5a25ef58a58176ff6d677f4fb1b"><code>1ac6dda</code></a> Version Packages (<a href="https://github.com/apollographql/apollo-client/issues/11126">#11126</a>)</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/1429d9cbcc125624729af32740b92dad6a869a94"><code>1429d9c</code></a> Create GitHub release for prereleases (<a href="https://github.com/apollographql/apollo-client/issues/11128">#11128</a>)</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/f54b86d60f1bc2e357dea307c3cf986c8a7a3c32"><code>f54b86d</code></a> Merge pull request <a href="https://github.com/apollographql/apollo-client/issues/10340">#10340</a> from apollographql/release-3.8</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/ec1b864c241bdf5213bf29e886c0b564f9fdeffb"><code>ec1b864</code></a> chore: exiting prerelease mode</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/e7b71aefd397c214fe64eaa6fabc72e0936c521e"><code>e7b71ae</code></a> Merge branch 'main' into release-3.8</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/f39b86eeb2a216b426643fc495228553cf0cfe86"><code>f39b86e</code></a> Refactor tests to remove RefetchFunction/FetchMoreFunction type helpers (<a href="https://github.com/apollographql/apollo-client/issues/11119">#11119</a>)</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/c6c489ba14d4549e1a554d55d4a725015738b70b"><code>c6c489b</code></a> Version Packages (rc) (<a href="https://github.com/apollographql/apollo-client/issues/11088">#11088</a>)</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/b4aefcfe97213461b9ce01946344e6a5e6d80704"><code>b4aefcf</code></a> Adds support for <code>skipToken</code> in options for <code>useSuspenseQuery</code> and `useBackgr...</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/78739e3efe86f6db959dd792d21fa12e0427b12c"><code>78739e3</code></a> Enforce <code>export type</code> for all type-level exports. (<a href="https://github.com/apollographql/apollo-client/issues/11115">#11115</a>)</li>
<li><a href="https://github.com/apollographql/apollo-client/commit/a8030618f55421cd514db9ee144e3849ac21bf16"><code>a803061</code></a> git-blame-ignore prettier PR</li>
<li>Additional commits viewable in <a href="https://github.com/apollographql/apollo-client/compare/v3.7.17...v3.8.0">compare view</a></li>
</ul>
</details>
<br />
---
<details>
<summary>Dependabot commands</summary>
<br />
You can trigger Dependabot actions by commenting on this MR
- `$dependabot recreate` will recreate this MR rewriting all the manual changes and resolving conflicts
</details>
argoyle
(Migrated from gitlab.com)
merged commit into master2023-08-08 06:03:03 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Bumps @apollo/client from 3.7.17 to 3.8.0.
Release notes
Sourced from
@apollo/client's releases.... (truncated)
Changelog
Sourced from
@apollo/client's changelog.... (truncated)
Commits
1ac6ddaVersion Packages (#11126)1429d9cCreate GitHub release for prereleases (#11128)f54b86dMerge pull request #10340 from apollographql/release-3.8ec1b864chore: exiting prerelease modee7b71aeMerge branch 'main' into release-3.8f39b86eRefactor tests to remove RefetchFunction/FetchMoreFunction type helpers (#11119)c6c489bVersion Packages (rc) (#11088)b4aefcfAdds support forskipTokenin options foruseSuspenseQueryand `useBackgr...78739e3Enforceexport typefor all type-level exports. (#11115)a803061git-blame-ignore prettier PRDependabot commands
You can trigger Dependabot actions by commenting on this MR
$dependabot recreatewill recreate this MR rewriting all the manual changes and resolving conflicts