Photo by Marvin Meyer on Unsplash

REACT NETWORK

React Query (Rest|GraphQL API)

Bundan önceki yazıda ReactQuery üzerinden Axios ile RestAPI tüketmeyi anlatmıştım, bu yazıda ise aynı yapı GraphQL API üzerinden kullanmayı göstereceğim.

Benim Sunucu İletişiminin Mimariye Etkisi blog yazısında en son geldiğim noktada ki mimari yapı aşağıdaki şekildeydi.

Burada eğer tüm yapınızı GraphQL üzerine kurmamış iseniz. Yani uygulamanız hem Rest API, hemde GraphQL API tüketiyor ise bu durumda en mantıklı olan Server State Management için

• React Query
• SWR

kullanmak olacaktır. Burada benim şimdilik üzerine yoğunlaştığım ReactQuery kütüphanesi diğerlerine göre daha popüler duruyor, Sunucu ile iletişim kısmında ise

• axios
• graphql-request

kütüphanelerinden faydalanıyor olacağım. Aslında denemelerde bulunduğum 2 örnek aşağıdaki durumu gösteriyor

• Server(MSW, MSWData, REST API), Server State Management (ReactQuery), Network(axios): Örnek Uygulama Linki
• Server(MSW, MSWData, GraphQL API), Server State Management (ReactQuery), Network(graphql-request): Örnek Uygulama Linki

Bu uygulamada’ da aynı Task (Görev Tanımlama uygulamasını) GraphQL örneklerini kullanarak gerçekleştiriyoruz.

Örnek Kodu inceyecek olursak. Öncelikle GraphQL Query iletişim yapılarını belirliyoruz..

import {gql} from 'graphql-request';

const GET_TASKS = gql`
  query GetTasks {
    tasks {
      id
      title
      isDone
    }
  }
`;

const CREATE_TASK = gql`
  mutation CreateTask($data: TaskInput) {
    createTask(data: $data) {
      id
      title
    }
  }
`;

const UPDATE_TASK = gql`
  mutation UpdateTask($id: ID!, $data: TaskInput!) {
    updateTask(where: {id: {equals: $id}}, data: $data) {
      id
      title
      isDone
    }
  }
`;

const DELETE_TASK = gql`
  mutation DeleteTask($id: ID!) {
    deleteTask(where: {id: {equals: $id}}) {
      id
      title
    }
  }
`;

Küçük uygulamamızı Provider Pattern ile ReactQuery çerçevelemiz gerekiyor..

import {QueryClient, QueryClientProvider} from 'react-query';
const  queryClient = new QueryClient();

// Mini App Part ===============================================================
export default function TaskMiniAppRQueryGraphQL() {
  const [taskName, setTaskName] = useState('New Task'); //

  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <TaskAddButtonContainer taskName={taskName} setTaskName={setTaskName} />
        <TaskListContainer />
      </div>
    </QueryClientProvider>
  );
}

Bu kısım sonrasında ReactQuery ve GraphQL-Request birlikleliğini kullanarak Backend ile iletişimi gerçekleştiriyoruz

import {useQuery} from 'react-query';
import {request as GraphQLManager} from 'graphql-request';

function TaskListContainer(props) {
  const {isLoading, error, data} = useQuery('listTasks', () => GraphQLManager(graphqlApiUri, GET_TASKS));
  if (isLoading) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div style={{backgroundColor: 'gray', padding: '5px 10px', height: 300, overflowY: 'auto'}}>
      <TaskList data={data} />
    </div>
  );
}

Bundan sonraki kısımlar benzer şekilde işletiliyor,

• LIST (Tasks)
• GET (Task)
• POST (Task)
• PUT (Task)
• DELETE (Task)

yukarıdaki GraphQL komutları çağırarak gerçekleştiriyoruz. Bu kısımda Network katmanı ile State Management kavramları birbirinden tamamıyla ayrılan bir yapıyı dönüşmüş oldu.

Referanslar

• Announcing “@mswjs/data” — data modeling library for testing JavaScript applications

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.