How to Implement User Profile with GraphQL: Simple Guide

To implement a user profile in GraphQL, define a User type with fields like id, name, and email. Then create Query and Mutation types to fetch and update user data respectively using resolvers.

Syntax

The basic GraphQL schema for a user profile includes a User type defining user fields, a Query type to fetch user data, and a Mutation type to update user information.

Each field in the User type has a type like ID or String. Queries and mutations specify input and output types.

graphql

type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  getUser(id: ID!): User
}

type Mutation {
  updateUser(id: ID!, name: String, email: String): User
}

Example

This example shows a simple GraphQL schema and resolver setup to get and update a user profile. The getUser query fetches user data by ID, and the updateUser mutation updates the user's name or email.

javascript

const { ApolloServer, gql } = require('apollo-server');

// Sample user data
const users = [
  { id: '1', name: 'Alice', email: '[e-mail]' },
  { id: '2', name: 'Bob', email: '[e-mail]' }
];

// GraphQL schema
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    getUser(id: ID!): User
  }

  type Mutation {
    updateUser(id: ID!, name: String, email: String): User
  }
`;

// Resolvers
const resolvers = {
  Query: {
    getUser: (_, { id }) => users.find(user => user.id === id),
  },
  Mutation: {
    updateUser: (_, { id, name, email }) => {
      const user = users.find(user => user.id === id);
      if (!user) return null;
      if (name !== undefined) user.name = name;
      if (email !== undefined) user.email = email;
      return user;
    },
  },
};

// Create server
const server = new ApolloServer({ typeDefs, resolvers });

// Start server
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

Output

Server ready at http://localhost:4000/

Common Pitfalls

Common mistakes include not marking required fields with !, forgetting to handle cases where the user is not found, and not validating input data in mutations.

Also, returning null without error handling can confuse clients.

graphql

/* Wrong: Missing non-null on required fields and no user check */
type User {
  id: ID
  name: String
  email: String
}

// Resolver without user existence check
getUser: (_, { id }) => users.find(user => user.id === id),

/* Right: Use non-null and check user existence */
type User {
  id: ID!
  name: String!
  email: String!
}

getUser: (_, { id }) => {
  const user = users.find(user => user.id === id);
  if (!user) throw new Error('User not found');
  return user;
}

Quick Reference

• User type: Defines user fields with types and non-null markers.
• Query: Fetch user by ID.
• Mutation: Update user fields optionally.
• Resolvers: Functions to get or update data.
• Error handling: Always check if user exists before returning data.

Key Takeaways

Define a clear User type with required fields using non-null markers (!).

Use Query to fetch user data and Mutation to update user profile fields.

Always check if the user exists in resolvers before returning or updating data.

Validate inputs in mutations to avoid invalid updates.

Provide meaningful errors when users are not found to help clients handle issues.