{"id":5434,"date":"2023-07-20T08:57:48","date_gmt":"2023-07-20T13:57:48","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=5434"},"modified":"2023-09-27T07:54:11","modified_gmt":"2023-09-27T12:54:11","slug":"using-fragments-with-wpgraphql-in-faust-js","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/","title":{"rendered":"Using Fragments with WPGraphQL in Faust.js"},"content":{"rendered":"\n

In WPGraphQL, fragments are a feature of GraphQL in the GraphQL query language<\/a> that allows you to define reusable selections of fields. Fragments allow you to group fields together and give them a name, which can then be used in multiple queries or mutations.<\/p>\n\n\n\n

In this article, I will explain what they provide and how to use them in Faust.js. Even though we\u2019re using Faust.js, you should be able to transfer this knowledge to any other using WPGraphQL.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

To benefit from this post, you should be familiar with the basics of WordPress development, WPGraphQL<\/a>, Faust.js<\/a>, and the Apollo Client<\/a>.<\/p>\n\n\n\n

Steps for Local Development Set-up<\/strong><\/h3>\n\n\n\n

WordPress Setup:<\/strong><\/h4>\n\n\n\n
    \n
  1. Set up a WordPress site on local, WP Engine, or any host of your choice<\/li>\n\n\n\n
  2. Install and activate the WPGraphQL plugin<\/li>\n\n\n\n
  3. Install and activate the Faust.js plugin<\/a><\/li>\n\n\n\n
  4. Install and activate the Advanced Custom Fields plugin<\/a><\/li>\n\n\n\n
  5. Install and activate the WPGraphQL For Advanced custom fields plugin<\/a><\/li>\n<\/ol>\n\n\n\n

    Faust.js Setup<\/strong><\/h4>\n\n\n\n

    Please follow the instructions to set up Faust.js in the quickstart portion of the docs here.<\/a><\/p>\n\n\n\n

    The Benefits of Using Fragments<\/h2>\n\n\n\n

    Code Reusability<\/strong>: Fragments enable you to define a set of fields once and reuse them across different queries or mutations. This helps in reducing code duplication and promotes a modular approach to defining GraphQL operations.<\/p>\n\n\n\n

    Query Organization<\/strong>: Fragments help organize complex queries by breaking them into smaller, more manageable parts. You can efficiently compose queries and maintain a clear structure by defining fragments for specific data structures or entities.<\/p>\n\n\n\n

    Readability and Maintainability<\/strong>: Fragments make GraphQL queries more readable and understandable. Separating the fields into reusable fragments makes it easier to grasp the structure of the data being queried. Additionally, when changes are required, you can update the fragment definition, and all the queries using that fragment will be automatically updated.<\/p>\n\n\n\n

    How to Create and Implement Fragments for Your WPGraphQL Queries<\/h2>\n\n\n\n

    Now that we went over the benefits of using fragments, let\u2019s create some.<\/p>\n\n\n\n

    In this example, I have a custom post type called Movies<\/code> <\/em>with the fields title, id, slug and uri <\/code>that we want to request.  <\/p>\n\n\n

    {\n<\/span><\/span>  movies {\n<\/span><\/span>    nodes {\n<\/span><\/span>      title\n<\/span><\/span>      id\n<\/span><\/span>      slug\n<\/span><\/span>      uri\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    The above image is a WPGraphQL query with no fragments.  <\/p>\n\n\n\n
    This is what it would look like if we made a fragment for the above query:<\/p>\n\n\n
    {\n<\/span><\/span>  movies {\n<\/span><\/span>    nodes {\n<\/span><\/span>      ...MovieFragment\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>fragment MovieFragment on Movie {\n<\/span><\/span>  title\n<\/span><\/span>  id\n<\/span><\/span>  slug\n<\/span><\/span>  uri\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    Let\u2019s break down how we created a fragment for our query.<\/p>\n\n\n\n
    Once we know what fields we want to pull out from our Movies<\/code> custom post type, we start making our fragment with the keyword fragment<\/code> followed by the name we choose, in this case, we call it MovieFragment<\/code>.<\/p>\n\n\n\n
    The on Movie<\/code> clause specifies this fragment is applicable to the Movie object type.  When WPGraphQL returns a node<\/code> of type Movie<\/code>, it uses this fragment to determine what fields to return on the result.<\/p>\n\n\n\n
    Inside the fragment, there are several fields (title, id, slug, uri<\/code>) that correspond to the fields of the Movie<\/code> type.<\/p>\n\n\n\n
    Lastly, we take our fragment named MovieFragment<\/code> and insert it into the main query block right under the nodes<\/code> that the original query had with the fields instead of the actual fields and just precede it by using ...<\/code> much like the JavaScript spread syntax<\/a> followed by the name. <\/p>\n\n\n\n
    You can go to your WP Admin, navigate over to GraphiQL IDE<\/strong>, and create the same custom post type with the same fields.  Copy my queries and try this yourself or go ahead and make your own.<\/p>\n\n\n\n
    Now that this is done, we get back the same results, but our code is much cleaner and organized in a reusable way. <\/p>\n\n\n\n
    Using Fragments in Faust.js<\/h2>\n\n\n\n
    Now that we know how to make and implement fragments, let\u2019s explore how Faust.js uses them out of the box with its default examples and create some custom ones.<\/p>\n\n\n\n
    Default Faust.js Fragments<\/strong><\/p>\n\n\n\n
    The first fragments we will explore are one of the defaults that come with Faust.js.  Let\u2019s look at the front page template that renders when you visit the main path.  This file is located at wp-templates\/front-page.js<\/code>. <\/p>\n\n\n
    import<\/span> { useQuery, gql } from<\/span> \"@apollo\/client\"<\/span>;\n<\/span><\/span>import<\/span> * as<\/span> MENUS from<\/span> \"..\/constants\/menus\"<\/span>;\n<\/span><\/span>import<\/span> { BlogInfoFragment } from<\/span> \"..\/fragments\/GeneralSettings\"<\/span>;\n<\/span><\/span>import<\/span> {\n<\/span><\/span>  Header,\n<\/span><\/span>  Footer,\n<\/span><\/span>  Main,\n<\/span><\/span>  Container,\n<\/span><\/span>  NavigationMenu,\n<\/span><\/span>  Hero,\n<\/span><\/span>  SEO,\n<\/span><\/span>} from<\/span> \"..\/components\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> function<\/span> Component<\/span>(<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> { data } = useQuery(Component.query, {\n<\/span><\/span>    variables<\/span>: Component.variables(),\n<\/span><\/span>  });\n<\/span><\/span>\n<\/span><\/span>  const<\/span> { title<\/span>: siteTitle, description<\/span>: siteDescription } =\n<\/span><\/span>    data?.generalSettings;\n<\/span><\/span>  const<\/span> primaryMenu = data?.headerMenuItems?.nodes ?? [];\n<\/span><\/span>  const<\/span> footerMenu = data?.footerMenuItems?.nodes ?? [];\n<\/span><\/span>\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <><\/span><\/span>\n<\/span><\/span>      <SEO<\/span> title<\/span>={siteTitle}<\/span> description<\/span>={siteDescription}<\/span> \/><\/span><\/span>\n<\/span><\/span>      <Header<\/span><\/span><\/span><\/span>\n<\/span><\/span>        title<\/span>={siteTitle}<\/span><\/span><\/span><\/span>\n<\/span><\/span>        description<\/span>={siteDescription}<\/span><\/span><\/span><\/span>\n<\/span><\/span>        menuItems<\/span>={primaryMenu}<\/span><\/span><\/span><\/span>\n<\/span><\/span>      \/><\/span><\/span><\/span>\n<\/span><\/span>      <Main<\/span>><\/span><\/span><\/span>\n<\/span><\/span>        <Container<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <Hero<\/span> title<\/span>={<\/span>\"Fran<\/span>'s<\/span> Front<\/span> Page<\/span>\"} \/><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <div<\/span> className<\/span>=\"text-center\"<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <p<\/span>><\/span>This page is utilizing the \"front-page\" WordPress template.<\/p<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <code<\/span>><\/span>.\/wp-templates\/front-page.js<\/code<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <\/Container<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/Main<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <Footer<\/span> title<\/span>={siteTitle}<\/span> menuItems<\/span>={footerMenu}<\/span> \/><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>Component.query = gql`<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  ${BlogInfoFragment}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  ${NavigationMenu.fragments.entry}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  query GetPageData(<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    $headerLocation: MenuLocationEnum<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    $footerLocation: MenuLocationEnum<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  ) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    generalSettings {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      ...BlogInfoFragment<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    headerMenuItems: menuItems(where: { location: $headerLocation }) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      nodes {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        ...NavigationMenuItemFragment<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    footerMenuItems: menuItems(where: { location: $footerLocation }) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      nodes {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        ...NavigationMenuItemFragment<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>`<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>Component.variables = ()<\/span> =><\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  return<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    headerLocation<\/span>: MENUS.PRIMARY_LOCATION,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    footerLocation<\/span>: MENUS.FOOTER_LOCATION,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    At the very top of this file, we import the fragment we will use named BlogInfoFragment<\/code> from the fragments directory.  The next thing to focus on is the bottom of the file:<\/p>\n\n\n
    Component.query = gql`\n<\/span><\/span>  ${BlogInfoFragment}\n<\/span><\/span>  ${NavigationMenu.fragments.entry}\n<\/span><\/span>  query GetPageData(\n<\/span><\/span>    $headerLocation: MenuLocationEnum\n<\/span><\/span>    $footerLocation: MenuLocationEnum\n<\/span><\/span>  ) {\n<\/span><\/span>    generalSettings {\n<\/span><\/span>      ...BlogInfoFragment\n<\/span><\/span>    }\n<\/span><\/span>    headerMenuItems: menuItems(where: { location: $headerLocation }) {\n<\/span><\/span>      nodes {\n<\/span><\/span>        ...NavigationMenuItemFragment\n<\/span><\/span>      }\n<\/span><\/span>    }\n<\/span><\/span>    footerMenuItems: menuItems(where: { location: $footerLocation }) {\n<\/span><\/span>      nodes {\n<\/span><\/span>        ...NavigationMenuItemFragment\n<\/span><\/span>      }\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>`;\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Next, we pass in our fragment, which contains the fields from the WP GenralSetttings<\/code> object type of title<\/code> and description<\/code>.   Notice the syntax being ${BlogInfoFragment}<\/code>. This is a technique called string interpolation or template interpolation<\/a>. It allows you to dynamically insert the content of the fragment variable into the query string at that specific location. This is equivalent to defining the fragment inline, which allows us to use the fragment in the actual query operation.<\/p>\n\n\n\n
    In this case, the ${BlogInfoFragment}<\/code> is used to include the fragment definition within the query string. The Apollo Client uses the gql <\/code>function to parse the query string and understand that the ...BlogInfoFragment <\/code>syntax is referencing the fragment named BlogInfoFragment<\/code>.  <\/p>\n\n\n\n
    Fragments Directory<\/h3>\n\n\n\n
    This fragment is located at fragments\/GeneralSettings.js<\/code> and is imported at the top of this file.<\/p>\n\n\n\n
    The GeneralSettings.js<\/code> file looks like this:<\/p>\n\n\n
    import<\/span> { gql } from<\/span> '@apollo\/client'<\/span>;\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>export<\/span> const<\/span> BlogInfoFragment = gql`<\/span>\n<\/span><\/span>fragment BlogInfoFragment on GeneralSettings {<\/span>\n<\/span><\/span>title<\/span>\n<\/span><\/span>description<\/span>\n<\/span><\/span>}<\/span>\n<\/span><\/span>`<\/span>;\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This is the directory in Faust.js which contains your fragment files that can be shared and reused when you import them into your components and queries.<\/p>\n\n\n\n
    The fragment directory is useful when you need a centralized location for all your fragments. This can be beneficial when multiple components share the same fragments or when you want to keep your component files less cluttered.<\/p>\n\n\n\n
    Colocated Fragments<\/h3>\n\n\n\n
    Colocated fragments are what Faust.js uses in the majority of its components.  Colocation refers to the practice of defining fragments in the same file or module as the component that uses them, keeping the fragment definition alongside the component’s code.<\/p>\n\n\n\n
    This is what we consider best practice within Faust.js for these reasons:<\/p>\n\n\n\n
    Code Organization<\/strong>: By colocating fragments in the same component that uses them, the code becomes more organized and maintainable.<\/p>\n\n\n\n
    Local Scope<\/strong>: Fragments defined within a component have local scope and are not exposed globally. This prevents naming collisions and reduces the likelihood of conflicts with other fragments defined elsewhere in the application.<\/p>\n\n\n\n
    Explicit Relationship<\/strong>: Colocated fragments establish an explicit relationship between the fragment and the component that uses it. When reading or modifying the component, developers understand the specific fragment(s) used, facilitating more manageable maintenance and updates.<\/p>\n\n\n\n
    Things to Consider\/Best Practices<\/h4>\n\n\n\n
    You could run into conflicts if you had two fragments with the same name, but different fields, it would cause an issue.  For example:<\/p>\n\n\n
    # Component A<\/span>\n<\/span><\/span>fragment PostFields on Post {\n<\/span><\/span>  title\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span># Component B<\/span>\n<\/span><\/span>fragment PostFields on Post {\n<\/span><\/span>  id\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>query {\n<\/span><\/span>  posts {\n<\/span><\/span>    nodes {\n<\/span><\/span>      ...PostFields\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    In this case, the query is using the PostFields<\/code> fragment, but  WPGraphQL does not know which version of PostFields<\/code> to use since there are two with the same name.  This results in an invalid query that will not execute.<\/p>\n\n\n\n
    This example is valid:<\/p>\n\n\n
    fragment PostTitle on Post {\n<\/span><\/span>  title\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>fragment PostId on Post {\n<\/span><\/span>  id\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>{\n<\/span><\/span>  posts {\n<\/span><\/span>    nodes {\n<\/span><\/span>      ...PostTitle\n<\/span><\/span>      ...PostId\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    We give a unique name to our fragments ensuring each component’s fragment definition remains distinct and can be used without conflict in WPGraphQL operations.<\/p>\n\n\n\n
    We can even ask for the same fields in both, like so:<\/p>\n\n\n
    fragment SomeComponentOnTheTopOfThePage on Post {\n<\/span><\/span>  id\n<\/span><\/span>  title\n<\/span><\/span>  author {\n<\/span><\/span>    node {\n<\/span><\/span>      id\n<\/span><\/span>      name\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>fragment SomeComponentOnTheSidebar on Post {\n<\/span><\/span>  id\n<\/span><\/span>  title\n<\/span><\/span>  date\n<\/span><\/span>  featuredImage {\n<\/span><\/span>    node {\n<\/span><\/span>      id\n<\/span><\/span>      sourceUrl\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>{\n<\/span><\/span>  posts {\n<\/span><\/span>    nodes {\n<\/span><\/span>      ...SomeComponentOnTheTopOfThePage\n<\/span><\/span>      ...SomeComponentOnTheSidebar\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    Both components need id<\/code> and title<\/code> so they both declare it. This might seem redundant but it is not.  If one component no longer needs the title<\/code>, it can take it out of its fragment, but the title will still be queried because the other<\/em> fragment still asks for it.<\/p>\n\n\n\n
    Each component should query for what it specifically needs.  However, components should not ask for fields they don’t actually need to satisfy another component’s needs.  <\/p>\n\n\n\n
    Let’s shift our focus back to our wp-templates\/front-page.js file<\/code>:<\/p>\n\n\n
    import<\/span> { useQuery, gql } from<\/span> \"@apollo\/client\"<\/span>;\n<\/span><\/span>import<\/span> * as<\/span> MENUS from<\/span> \"..\/constants\/menus\"<\/span>;\n<\/span><\/span>import<\/span> { BlogInfoFragment } from<\/span> \"..\/fragments\/GeneralSettings\"<\/span>;\n<\/span><\/span>import<\/span> {\n<\/span><\/span>  Header,\n<\/span><\/span>  Footer,\n<\/span><\/span>  Main,\n<\/span><\/span>  Container,\n<\/span><\/span>  NavigationMenu,\n<\/span><\/span>  Hero,\n<\/span><\/span>  SEO,\n<\/span><\/span>} from<\/span> \"..\/components\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> function<\/span> Component<\/span>(<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> { data } = useQuery(Component.query, {\n<\/span><\/span>    variables<\/span>: Component.variables(),\n<\/span><\/span>  });\n<\/span><\/span>\n<\/span><\/span>  const<\/span> { title<\/span>: siteTitle, description<\/span>: siteDescription } =\n<\/span><\/span>    data?.generalSettings;\n<\/span><\/span>  const<\/span> primaryMenu = data?.headerMenuItems?.nodes ?? [];\n<\/span><\/span>  const<\/span> footerMenu = data?.footerMenuItems?.nodes ?? [];\n<\/span><\/span>\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <><\/span><\/span>\n<\/span><\/span>      <SEO<\/span> title<\/span>={siteTitle}<\/span> description<\/span>={siteDescription}<\/span> \/><\/span><\/span>\n<\/span><\/span>      <Header<\/span><\/span><\/span><\/span>\n<\/span><\/span>        title<\/span>={siteTitle}<\/span><\/span><\/span><\/span>\n<\/span><\/span>        description<\/span>={siteDescription}<\/span><\/span><\/span><\/span>\n<\/span><\/span>        menuItems<\/span>={primaryMenu}<\/span><\/span><\/span><\/span>\n<\/span><\/span>      \/><\/span><\/span><\/span>\n<\/span><\/span>      <Main<\/span>><\/span><\/span><\/span>\n<\/span><\/span>        <Container<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <Hero<\/span> title<\/span>={<\/span>\"Fran<\/span>'s<\/span> Front<\/span> Page<\/span>\"} \/><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <div<\/span> className<\/span>=\"text-center\"<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <p<\/span>><\/span>This page is utilizing the \"front-page\" WordPress template.<\/p<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <code<\/span>><\/span>.\/wp-templates\/front-page.js<\/code<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <\/Container<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/Main<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <Footer<\/span> title<\/span>={siteTitle}<\/span> menuItems<\/span>={footerMenu}<\/span> \/><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>Component.query = gql`<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  ${BlogInfoFragment}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  ${NavigationMenu.fragments.entry}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  query GetPageData(<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    $headerLocation: MenuLocationEnum<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    $footerLocation: MenuLocationEnum<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  ) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    generalSettings {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      ...BlogInfoFragment<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    headerMenuItems: menuItems(where: { location: $headerLocation }) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      nodes {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        ...NavigationMenuItemFragment<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    footerMenuItems: menuItems(where: { location: $footerLocation }) {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      nodes {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        ...NavigationMenuItemFragment<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>`<\/span>;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>Component.variables = ()<\/span> =><\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  return<\/span> {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    headerLocation<\/span>: MENUS.PRIMARY_LOCATION,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    footerLocation<\/span>: MENUS.FOOTER_LOCATION,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  };<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Let’s look at the bottom of the file.  The colocated fragment is ${NavigationMenu.fragments.entry}<\/code>.  The ${NavigationMenu.fragments.entry}<\/code> syntax includes the entry fragment from the NavigationMenu<\/code> fragment collection. It allows the fields defined in the entry fragment to be used in the query. <\/p>\n\n\n\n
    This fragment is part of the NavigationMenu<\/code> object and is defined in the components\/NavigationMenu.js<\/code> file:<\/p>\n\n\n
    import<\/span> classNames from<\/span> 'classnames\/bind'<\/span>;\n<\/span><\/span>import<\/span> { gql } from<\/span> '@apollo\/client'<\/span>;\n<\/span><\/span>import<\/span> Link from<\/span> 'next\/link'<\/span>;\n<\/span><\/span>import<\/span> flatListToHierarchical from<\/span> '..\/..\/utilities\/flatListToHierarchical'<\/span>;\n<\/span><\/span>import<\/span> styles from<\/span> '.\/NavigationMenu.module.scss'<\/span>;\n<\/span><\/span>import<\/span> stylesFromWP from<\/span> '.\/NavigationMenuClassesFromWP.module.scss'<\/span>;\n<\/span><\/span>\n<\/span><\/span>let<\/span> cx = classNames.bind(styles);\n<\/span><\/span>let<\/span> cxFromWp = classNames.bind(stylesFromWP);\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> function<\/span> NavigationMenu<\/span>({ menuItems, className }<\/span>) <\/span>{\n<\/span><\/span>  if<\/span> (!menuItems) {\n<\/span><\/span>    return<\/span> null<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>\n<\/span><\/span>  \/\/ Based on https:\/\/www.wpgraphql.com\/docs\/menus\/#hierarchical-data<\/span>\n<\/span><\/span>  const<\/span> hierarchicalMenuItems = flatListToHierarchical(menuItems);\n<\/span><\/span>\n<\/span><\/span>  function<\/span> renderMenu<\/span>(items<\/span>) <\/span>{\n<\/span><\/span>    return<\/span> (\n<\/span><\/span>      <ul<\/span> className<\/span>={cx(<\/span>'menu<\/span>')}><\/span><\/span>\n<\/span><\/span>        {items.map((item) => {<\/span><\/span>\n<\/span><\/span>          const { id, path, label, children, cssClasses } = item;<\/span><\/span>\n<\/span><\/span><\/span><\/span>\n<\/span><\/span>          \/\/ @TODO - Remove guard clause after ghost menu items are no longer appended to array.<\/span><\/span>\n<\/span><\/span>          if (!item.hasOwnProperty('__typename')) {<\/span><\/span>\n<\/span><\/span>            return null;<\/span><\/span>\n<\/span><\/span>          }<\/span><\/span>\n<\/span><\/span><\/span><\/span>\n<\/span><\/span>          return (<\/span><\/span>\n<\/span><\/span>            <li<\/span> key<\/span>={id}<\/span> className<\/span>={cxFromWp(cssClasses)}<\/span>><\/span><\/span><\/span>\n<\/span><\/span>              <Link<\/span> href<\/span>={path<\/span> ?? ''}><\/span>{label ?? ''}<\/Link<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>              {children.length ? renderMenu(children, true) : null}<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <\/li<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          );<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        })}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/ul<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    );<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  }<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  return<\/span> (<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <nav<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      className<\/span>={cx([<\/span>'component<\/span>', className<\/span>])}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      role<\/span>=\"navigation\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      aria-label<\/span>={<\/span>`${menuItems<\/span>[0<\/span>]?.menu<\/span>?.node<\/span>?.name<\/span>} menu<\/span>`}><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      {renderMenu(hierarchicalMenuItems)}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/nav<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>NavigationMenu.fragments = {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  entry<\/span>: gql`<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    fragment NavigationMenuItemFragment on MenuItem {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      id<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      path<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      label<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      parentId<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      cssClasses<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      menu {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        node {<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          name<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  `<\/span>,<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>};<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    At the very bottom of the file are the fields we ask for in the fragment as follows:<\/p>\n\n\n
     fragment NavigationMenuItemFragment on MenuItem {\n<\/span><\/span>      id\n<\/span><\/span>      path\n<\/span><\/span>      label\n<\/span><\/span>      parentId\n<\/span><\/span>      cssClasses\n<\/span><\/span>      menu {\n<\/span><\/span>        node {\n<\/span><\/span>          name\n<\/span><\/span>        }\n<\/span><\/span>      }\n<\/span><\/span>    }\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    The actual fragment is defined in the child component (NavigationMenu.js<\/code>) that uses it explicitly within its component.  It is then reused into a parent component (front-page.js<\/code>)that consumes it and renders it along with other fragments in the query.  <\/p>\n\n\n\n
    Custom Fragment Examples<\/strong><\/h3>\n\n\n\n
    Now that we have an example of default fragments in Faust.js, let\u2019s explore some custom ones in this repo. <\/p>\n\n\n\n
    Using the custom post types we made for this article, let\u2019s create a query block and fragments for them.<\/p>\n\n\n\n
    The file we are looking at is located at components\/MovieCard.js<\/code>.  <\/p>\n\n\n
    import<\/span> { gql, useQuery } from<\/span> \"@apollo\/client\"<\/span>;\n<\/span><\/span>import<\/span> Link from<\/span> \"next\/link\"<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> GET_MOVIES = gql`<\/span>\n<\/span><\/span>  query GET_MOVIES {<\/span>\n<\/span><\/span>    movies {<\/span>\n<\/span><\/span>      nodes {<\/span>\n<\/span><\/span>        ...MovieFragment<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>    actors {<\/span>\n<\/span><\/span>      nodes {<\/span>\n<\/span><\/span>        ...ActorFragment<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span><\/span>\n<\/span><\/span>  fragment MovieFragment on Movie {<\/span>\n<\/span><\/span>    title<\/span>\n<\/span><\/span>    id<\/span>\n<\/span><\/span>    slug<\/span>\n<\/span><\/span>    uri<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span><\/span>\n<\/span><\/span>  fragment ActorFragment on Actor {<\/span>\n<\/span><\/span>    title<\/span>\n<\/span><\/span>    id<\/span>\n<\/span><\/span>    slug<\/span>\n<\/span><\/span>    uri<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span>`<\/span>;\n<\/span><\/span>\n<\/span><\/span>function<\/span> MovieList<\/span>(<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> { loading, error, data } = useQuery(GET_MOVIES);\n<\/span><\/span>\n<\/span><\/span>  if<\/span> (loading) return<\/span> <p<\/span>><\/span>Loading...<\/p<\/span>><\/span><\/span>;\n<\/span><\/span>  if<\/span> (error) return<\/span> <p<\/span>><\/span>Error: {error.message}<\/p<\/span>><\/span><\/span>;\n<\/span><\/span>\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <div<\/span>><\/span><\/span>\n<\/span><\/span>      <h2<\/span>><\/span>Movies<\/h2<\/span>><\/span><\/span><\/span>\n<\/span><\/span>      <ul<\/span>><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        {data.movies.nodes.map((movie) => (<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <li<\/span> key<\/span>={movie.id}<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <Link<\/span> href<\/span>={<\/span>`${movie.uri<\/span>}`}><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>              <a<\/span>><\/span>{movie.title}<\/a<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <\/Link<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <\/li<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        ))}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/ul<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <h2<\/span>><\/span>Actors<\/h2<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <ul<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        {data.actors.nodes.map((actor) => (<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <li<\/span> key<\/span>={actor.id}<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <Link<\/span> href<\/span>={<\/span>`${actor.uri<\/span>}`}><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>              <a<\/span>><\/span>{actor.title}<\/a<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>            <\/Link<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>          <\/li<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>        ))}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/ul<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> MovieList;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Let\u2019s focus on the top of the file where our WPGraphQL Query and Fragment is located:<\/p>\n\n\n
    const<\/span> GET_MOVIES = gql`<\/span>\n<\/span><\/span>  query GET_MOVIES {<\/span>\n<\/span><\/span>    movies {<\/span>\n<\/span><\/span>      nodes {<\/span>\n<\/span><\/span>        ...MovieFragment<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>    actors {<\/span>\n<\/span><\/span>      nodes {<\/span>\n<\/span><\/span>        ...ActorFragment<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span><\/span>\n<\/span><\/span>  fragment MovieFragment on Movie {<\/span>\n<\/span><\/span>    title<\/span>\n<\/span><\/span>    id<\/span>\n<\/span><\/span>    slug<\/span>\n<\/span><\/span>    uri<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span><\/span>\n<\/span><\/span>  fragment ActorFragment on Actor {<\/span>\n<\/span><\/span>    title<\/span>\n<\/span><\/span>    id<\/span>\n<\/span><\/span>    slug<\/span>\n<\/span><\/span>    uri<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span>`<\/span>;\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>fragment ActorFragment on Actor {\n<\/span><\/span>title\n<\/span><\/span>id\n<\/span><\/span>slug\n<\/span><\/span>uri\n<\/span><\/span>}\n<\/span><\/span>`;<\/span>\n<\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The MovieFragment<\/code> and ActorFragment<\/code> are defined inline within the GraphQL query using the fragment<\/code> keyword. They are then referenced using the spread syntax (...)<\/code> within the GET_MOVIES<\/code> query to include the fragment fields in the response which are at the bottom of the query.<\/p>\n\n\n\n
    Nested Fragments<\/strong><\/h4>\n\n\n\n
    We not only included the Movie data in a fragment, but we also nested the Actor data fragment in the query block.  This is useful for larger applications where you could have multiple nested fragments that go on and on.<\/p>\n\n\n\n
    Along with the main benefits of regular fragments, nested fragments also allow developers to have composition. This enables you to build up more complex fragments by including smaller fragments within them. You can nest fragments within other fragments, creating a hierarchy of reusable building blocks. This modular approach makes composing and customizing queries based on specific needs easier.<\/p>\n\n\n\n
    If you have a fragment that needs to be shared across multiple components, you can have these live in the fragments folder, as stated earlier in the article. The query would look like this instead:<\/p>\n\n\n
    const<\/span> GET_MOVIES = gql`<\/span>\n<\/span><\/span>  ${MovieFragment}<\/span><\/span>\n<\/span><\/span>  ${ActorFragment}<\/span><\/span>\n<\/span><\/span>  query GET_MOVIES {<\/span>\n<\/span><\/span>    movies {<\/span>\n<\/span><\/span>      nodes {<\/span>\n<\/span><\/span>        ...MovieFragment<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>    actors {<\/span>\n<\/span><\/span>      nodes {<\/span>\n<\/span><\/span>        ...ActorFragment<\/span>\n<\/span><\/span>      }<\/span>\n<\/span><\/span>    }<\/span>\n<\/span><\/span>  }<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then we would go into the fragments folder and create our fragments there.  Once that is done, we would import them into the component using them.<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    I hope this article provided a better understanding of using fragments with WPGraphQL and Faust.js.  <\/p>\n\n\n\n
    As always, super stoked to hear your feedback and any questions you might have on headless WordPress. Hit us up on our Discord<\/a> channel and give Faust.js and WPGraphQL a try!<\/p>\n\n\n\n
    \n
    \n
    \n
    <\/path><\/path><\/svg><\/div><\/div>\n\n\n\n
    Faust.js<\/p>\n<\/div>\n\n\n\n
    The JavaScript framework
    specifically for WordPress.<\/p>\n\n\n\n
    \n
    Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
    \n
    \n
    \n
    <\/path><\/svg><\/div><\/div>\n\n\n\n
    WPGraphQL<\/p>\n<\/div>\n\n\n\n
    An extendable GraphQL 
    schema & API for WordPress.<\/p>\n\n\n\n
    \n
    Download<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    In WPGraphQL, fragments are a feature of GraphQL in the GraphQL query language that allows you to define reusable selections of fields. Fragments allow you to group fields together and […]<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[25,26],"class_list":["post-5434","post","type-post","status-publish","format-standard","hentry","category-headless","tag-faust-js","tag-wpgraphql"],"yoast_head":"\nUsing Fragments with WPGraphQL in Faust.js - Builders<\/title>\n<meta name=\"description\" content=\"Discover how to leverage the capabilities and understand best practices of fragments in WPGraphQL and Faust.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Fragments with WPGraphQL in Faust.js - Builders\" \/>\n<meta property=\"og:description\" content=\"Discover how to leverage the capabilities and understand best practices of fragments in WPGraphQL and Faust.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-20T13:57:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-27T12:54:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-20-at-11.25.36-AM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1293\" \/>\n\t<meta property=\"og:image:height\" content=\"483\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Francis Agulto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-20-at-11.25.36-AM.png\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Francis Agulto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/\"},\"author\":{\"name\":\"Francis Agulto\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/bcdcb4ac0b215c34b6b30e440a24dc54\"},\"headline\":\"Using Fragments with WPGraphQL in Faust.js\",\"datePublished\":\"2023-07-20T13:57:48+00:00\",\"dateModified\":\"2023-09-27T12:54:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/\"},\"wordCount\":1775,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"keywords\":[\"Faust.js\",\"WPGraphQL\"],\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/\",\"name\":\"Using Fragments with WPGraphQL in Faust.js - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"datePublished\":\"2023-07-20T13:57:48+00:00\",\"dateModified\":\"2023-09-27T12:54:11+00:00\",\"description\":\"Discover how to leverage the capabilities and understand best practices of fragments in WPGraphQL and Faust.js.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/using-fragments-with-wpgraphql-in-faust-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Fragments with WPGraphQL in Faust.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/bcdcb4ac0b215c34b6b30e440a24dc54\",\"name\":\"Francis Agulto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g\",\"caption\":\"Francis Agulto\"},\"description\":\"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Fragments with WPGraphQL in Faust.js - Builders","description":"Discover how to leverage the capabilities and understand best practices of fragments in WPGraphQL and Faust.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/","og_locale":"en_US","og_type":"article","og_title":"Using Fragments with WPGraphQL in Faust.js - Builders","og_description":"Discover how to leverage the capabilities and understand best practices of fragments in WPGraphQL and Faust.js.","og_url":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/","og_site_name":"Builders","article_published_time":"2023-07-20T13:57:48+00:00","article_modified_time":"2023-09-27T12:54:11+00:00","og_image":[{"width":1293,"height":483,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-20-at-11.25.36-AM.png","type":"image\/png"}],"author":"Francis Agulto","twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-20-at-11.25.36-AM.png","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Francis Agulto","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/"},"author":{"name":"Francis Agulto","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54"},"headline":"Using Fragments with WPGraphQL in Faust.js","datePublished":"2023-07-20T13:57:48+00:00","dateModified":"2023-09-27T12:54:11+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/"},"wordCount":1775,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"keywords":["Faust.js","WPGraphQL"],"articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/","url":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/","name":"Using Fragments with WPGraphQL in Faust.js - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"datePublished":"2023-07-20T13:57:48+00:00","dateModified":"2023-09-27T12:54:11+00:00","description":"Discover how to leverage the capabilities and understand best practices of fragments in WPGraphQL and Faust.js.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/using-fragments-with-wpgraphql-in-faust-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Using Fragments with WPGraphQL in Faust.js"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/bcdcb4ac0b215c34b6b30e440a24dc54","name":"Francis Agulto","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c8a05c76944fc987d57296c96dc368055844527088c0aa44297edbfa8b82546?s=96&d=mm&r=g","caption":"Francis Agulto"},"description":"Fran Agulto is a Developer Advocate at WP Engine. He is a lover of all things headless WordPress, Rock Climbing, and overall being stoked for people that love what they do and share that stoke with others! Follow me on Twitter for cool stoked headless WP!","url":"https:\/\/wpengine.com\/builders\/author\/francis-agultowpengine-com-2-2-2-2-2-2-2-2-2-2-2-3\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=5434"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5434\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=5434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=5434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=5434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

    In this code block, we export the variable called BlogInfoFragment<\/code> and use the gql<\/code> client function from Apollo to define it.  Then we create the fragment in the template literal and add the fields we want back in the fragment.     In GraphQL, the template literal <\/a>starts with the backtick character (``)<\/code> and ends with another backtick.  They are used to define multi-string values for queries and mutations.  This is used to define the GraphQL fragment named BlogInfoFragment<\/code>.  <\/p>\n\n\n\n
    On the template Component<\/code>, we define a query<\/code> property that we assign at the top of the query block is the Component.query<\/code> syntax, a GraphQL query string used to fetch the template’s data in the Faust.js template hierarchy<\/a>. This is a Faust.js convention that makes it easier to load data. <\/p>\n\n\n\n