@graphql-codegen/typed-document-node

Patch Changes

• Updated dependencies [2276708d0]:
  • @graphql-codegen/visitor-plugin-common@4.0.1

Major Changes

• bb66c2a31 Thanks @n1ru4l! - Require Node.js >= 16. Drop support for Node.js 14

Minor Changes

• #9196 3848a2b73 Thanks @beerose! - Add @defer directive support

  When a query includes a deferred fragment field, the server will return a partial response with the non-deferred fields first, followed by the remaining fields once they have been resolved.

  Once start using the @defer directive in your queries, the generated code will automatically include support for the directive.

  // src/index.tsx
  import { graphql } from './gql'
  
  const OrdersFragment = graphql(`
    fragment OrdersFragment on User {
      orders {
        id
        total
      }
    }
  `)
  const GetUserQuery = graphql(`
    query GetUser($id: ID!) {
      user(id: $id) {
        id
        name
        ...OrdersFragment @defer
      }
    }
  `)
  

  The generated type for GetUserQuery will have information that the fragment is incremental, meaning it may not be available right away.

  // gql/graphql.ts
  export type GetUserQuery = { __typename?: 'Query'; id: string; name: string } & ({
    __typename?: 'Query'
  } & {
    ' $fragmentRefs'?: { OrdersFragment: Incremental<OrdersFragment> }
  })
  

  Apart from generating code that includes support for the @defer directive, the Codegen also exports a utility function called isFragmentReady. You can use it to conditionally render components based on whether the data for a deferred fragment is available:

  const OrdersList = (props: { data: FragmentType<typeof OrdersFragment> }) => {
    const data = useFragment(OrdersFragment, props.data);
    return (
      // render orders list
    )
  };
  
  function App() {
    const { data } = useQuery(GetUserQuery);
    return (
      {data && (
        <>
          {isFragmentReady(GetUserQuery, OrdersFragment, data)
  					&& <OrdersList data={data} />}
        </>
      )}
    );
  }
  export default App;
  

Patch Changes

• Updated dependencies [4d9ea1a5a, 4d9ea1a5a, f46803a8c, 3848a2b73, ba84a3a27, 63827fabe, 50471e651, 5aa95aa96, ca02ad172, e1dc75f3c, bb66c2a31, 5950f5a68, 5aa95aa96]:
  • @graphql-codegen/plugin-helpers@5.0.0
  • @graphql-codegen/visitor-plugin-common@4.0.0