[인스타클론코딩] [Server].15 - fragment를 이용한 데이터접근

fragment 를 사용하는 이유

graphql는 서버의 공격를 막기위해 데이터를 깊게 접근할 수 없도록 해놓은 것을 해결하기 위해 사용하는 것입니다. fragment를 지정해줌으로 데이터에 깊게 접근할 수 있습니다.
공식 DOC

fragment를 사용하기 전

me.js

import { prisma } from '../../../../generated/prisma-client';

export default {
    Query: {
        me: (_, __, { request, isAuthenticated }) => {
            isAuthenticated(request);
            const { user } = request;
            return prisma.user({ id: user.id });
        }
    }
};

fragment를 사용한 후

me.js

import { prisma } from '../../../../generated/prisma-client';
import { USER_FRAGMENT } from '../../../fragments';

export default {
    Query: {
        me: (_, __, { request, isAuthenticated }) => {
            isAuthenticated(request);
            const { user } = request;
            return prisma.user({ id: user.id }).$fragment(USER_FRAGMENT);
        }
    }
};

또 다른 방법

이 방법은 return 해주는 객체를 user가 아닌 user와 posts로 이루어진 객체를 return해줘서 사용하는 방식입니다.

me.graphql

ProfileResponse라는 객체를 만들어서 me라는 query의 return으로 사용하는 것입니다.
```
type ProfileResponse {
  user: User!
  posts: [Post!]!
}

type Query {
    me: ProfileResponse!
}
```

me.js

이 방법은 fragment를 사용할 필요가 없이 me Query에 맞는 객체를 다 리턴해주면 됩니다. 여기서는 posts와 User를 return 해줘야합니다.

import { prisma } from '../../../../generated/prisma-client';

export default {
    Query: {
        me: async (_, __, { request, isAuthenticated }) => {
            isAuthenticated(request);
            const { user } = request;
            const userProfile = await prisma.user({ id: user.id });
            const posts = await prisma.user({ id: user.id }).posts();
            return {
                user: userProfile,
                posts
            };
        }
    }
};

User와 Posts를 따로따로 Prisma에서 꺼내 사용하는 것이 중요한 것 같습니다.

const userProfile = await prisma.user({ id: user.id });
const posts = await prisma.user({ id: user.id }).posts();

graphql Query

  {
   me {
    user {
      username
      firstName
      lastName
      email
    }
    posts {
      id
    }
  }
}