To keep the queries organised add them to their own file:

# create the graphql-queries.js file
touch src/lib/graphql/graphql-queries.js

For now, focus on the AllPosts and Post queries. There’s some repetition on some of the fields, this can be reduced by creating a GraphQL fragment.

For the purposes of this project it’s not strictly necessary, so this can be an optional step. It’s a handy GraphQL feature to be aware of regardless.

You might also have noticed the posts aren't in date order, add an orderBy input in the posts model on the getAllPosts query to have them sorted in descending order:

import { gql } from 'graphql-request'

const POSTS_FRAGMENT = gql`
  fragment PostDetails on Post {
    title
    date
    tags
    coverImage {
      url
    }
  }
`

export const getAllPosts = gql`
	${POSTS_FRAGMENT}
	query AllPosts {
		posts(orderBy: date_DESC) {
			slug
			excerpt
			...PostDetails
		}
	}
`;

export const getPostQuery = gql`
  ${POSTS_FRAGMENT}
  query PostQuery($slug: String!) {
    post(where: { slug: $slug }) {
      ...PostDetails
      author {
        name
        authorTitle: title
        picture {
          url(
            transformation: {
              image: { resize: { fit: clip, height: 50, width: 50 } }
            }
          )
        }
      }
      content {
        html
      }
    }
  }
`

The getAllPosts query can now be imported into the src/routes/+page.js file to replace the query used there, we can also pass in the count variable to the query to get the first three posts:

import { client } from '$lib/graphql/graphql-client';
import { getAllPosts } from '$lib/graphql/graphql-queries';

/** @type {import('./$types').PageLoad} */
export const load = async () => {
	const { posts } = await client.request(getAllPosts, { count: 3 });

	return {
		posts
	};
};

Don’t forget the page queries, these will be used soon, add these to the end of the src/lib/graphql/graphql-queries.js file:

export const getAllPages = gql`
  query Pages {
    pages {
      title
      slug
      content {
        html
      }
    }
  }
`

export const getPageQuery = gql`
  query Page($slug: String!) {
    page(where: { slug: $slug }) {
      title
      content {
        html
      }
    }
  }
`

Commit the changes to git and move to the next section.