Skip to content

Latest commit

 

History

History
112 lines (81 loc) · 9.46 KB

summary.en.md

File metadata and controls

112 lines (81 loc) · 9.46 KB

Course Summary: GraphQL with Laravel and Vue

This document summarizes the key points from the course. I highly recommend watching the full course if you have the opportunity.

Before You Get Started

  • I summarize key points from useful courses to learn and review quickly.
  • Simply click on Ask AI links to dive into any topic you want.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

Topic 1: Introduction to GraphQL

  • Summary: This opening episode dives into what GraphQL is all about, positioning it as a modern alternative to REST APIs. It covers the basics of making queries to fetch exactly the data you need, using real-world examples from public APIs like GitHub, weather services, and movie databases. You'll see how GraphQL's single endpoint and intuitive syntax make it easier to work with compared to multiple REST endpoints.
  • Example: Querying GitHub for a user's repositories with fields like name and URL, then expanding to include followers or bio—all in one request, demonstrating how GraphQL avoids over-fetching data.
  • Link for More Details: Ask AI: Introduction to GraphQL

Topic 2: Lighthouse Queries for Posts

  • Summary: Here, we set up a Laravel app with the Lighthouse package to handle GraphQL on the backend. It walks through creating models, relationships, and a schema file to define types like User and Post. Directives simplify pulling data, and GraphQL Playground helps test queries for fetching posts with pagination and sorting.
  • Example: Defining a Post type with fields like title and body, adding a @belongsTo directive for the user relationship, and querying all posts sorted by creation date using @paginate and @orderBy.
  • Link for More Details: Ask AI: Lighthouse Queries for Posts

Topic 3: Lighthouse Mutations for Posts

  • Summary: Building on queries, this part focuses on writing data with mutations for creating, updating, and deleting posts. Directives like @create, @update, and @delete make it straightforward, plus adding validation rules to ensure inputs like title and body meet requirements.
  • Example: A createPost mutation that takes title and body, uses @create and @rules for validation (e.g., required and min:3), and returns the new post's ID and details.
  • Link for More Details: Ask AI: Lighthouse Mutations for Posts

Topic 4: Lighthouse Resolvers

  • Summary: When built-in directives aren't enough, resolvers let you add custom logic to queries and mutations. The episode shows generating resolvers and using them for things like custom sorting or extra actions during data operations.
  • Example: Creating a resolver for a posts query that fetches and sorts posts by latest, or for createPost to log an event like sending an email after saving the post.
  • Link for More Details: Ask AI: Lighthouse Resolvers

Topic 5: Simple AJAX Requests to GraphQL

  • Summary: Shifting to the client side, this explains how GraphQL is just a POST request under the hood. Using Vue, you can make requests with fetch or Axios to send queries and mutations, handling the JSON payload for the GraphQL endpoint.
  • Example: In a Vue component, using fetch to POST a query for posts to /graphql, parsing the response, and displaying titles in a list—perfect for simple integrations without full libraries.
  • Link for More Details: Ask AI: Simple AJAX Requests to GraphQL

Topic 6: GraphQL Requests from Laravel

  • Summary: If you're calling GraphQL from another Laravel app, use the built-in HTTP client. It covers sending queries as JSON and processing responses, great for server-to-server communication.
  • Example: HTTP::post('/graphql', ['query' => '{ posts { title } }'])->json() to fetch and display post titles in a Blade view.
  • Link for More Details: Ask AI: GraphQL Requests from Laravel

Topic 7: Authentication in Lighthouse

  • Summary: Secure your GraphQL API with Sanctum for token-based auth. Set up mutations for login, logout, and registration, using directives like @guard to protect queries and inject user IDs automatically.
  • Example: A login mutation that validates credentials, generates a token with $user->createToken(), and returns it for use in headers.
  • Link for More Details: Ask AI: Authentication in Lighthouse

Topic 8: Authentication in Vue Apollo

  • Summary: On the Vue side, handle auth by storing tokens in localStorage after login mutations and including them in request headers. Covers login, registration, and logout flows manually since Vue Apollo v4 requires it.
  • Example: After a successful login mutation, localStorage.setItem('apollo-token', data.login.token) and redirect, then use a getHeaders function to add Authorization: Bearer in ApolloClient setup.
  • Link for More Details: Ask AI: Authentication in Vue Apollo

Topic 9: Authorization on the Server

  • Summary: Ensure users can only perform allowed actions using @can directives tied to Laravel policies. This protects updates, deletes, and admin queries, injecting logged-in user details where needed.
  • Example: In updatePost mutation, @can(ability: "update", find: "id") checks if $user->id matches $post->user_id in the policy.
  • Link for More Details: Ask AI: Authorization on the Server

Topic 10: Authorization Links on the Client

  • Summary: Hide or show UI elements like update links based on auth status, and redirect unauthorized users from pages. Use queries to fetch user details and compare IDs for permissions.
  • Example: v-if="post.user.id === me.id" on an update link, and watcher to redirect if !me.isAdmin on admin page.
  • Link for More Details: Ask AI: Authorization Links on the Client

About the summarizer

I'm Ali Sol, a Backend Developer. Learn more: