How can RTK Query work with GraphQL or custom fetch logic?

Question

Accepted Answer

RTK Query can be integrated with GraphQL or any custom fetch logic by using a **custom `baseQuery`**. Instead of relying on REST-style endpoints, you can define your own query function that sends GraphQL requests or handles special request logic. **Using `fetchBaseQuery` for Simple GraphQL Requests:** Pass a static GraphQL query string and variables directly to the `body` of the request. **Creating a Custom `baseQuery`:** Use your own fetch or Axios logic to send requests and handle responses. **Wrapping GraphQL Clients (e.g., Apollo, urql):** Integrate RTK Query with existing GraphQL client instances to share caching and schema handling. import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const graphqlApi = createApi({
  reducerPath: 'graphqlApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/graphql' }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => ({
        method: 'POST',
        body: {
          query: `{
            users {
              id
              name
              email
            }
          }`
        },
      }),
    }),
  }),
});

export const { useGetUsersQuery } = graphqlApi; In this example, RTK Query sends a POST request containing a GraphQL query string in the request body. The hook `useGetUsersQuery()` automatically handles caching, loading, and error states. import { createApi } from '@reduxjs/toolkit/query/react';

const customBaseQuery = async ({ body }) => {
  try {
    const response = await fetch('https://example.com/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    const data = await response.json();

if (data.errors) {
      return { error: { status: 'CUSTOM_ERROR', data: data.errors } };
    }

return { data: data.data };
  } catch (error) {
    return { error: { status: 'FETCH_ERROR', data: error } };
  }
};

export const api = createApi({
  reducerPath: 'customApi',
  baseQuery: customBaseQuery,
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => ({
        body: {
          query: `{
            posts {
              id
              title
            }
          }`
        }
      }),
    }),
  }),
}); This custom base query gives you full flexibility — allowing you to handle GraphQL operations, custom headers, authentication, or even token refresh logic as needed. In summary, RTK Query is backend-agnostic. Whether you use REST, GraphQL, or a completely custom fetch implementation, you can adapt it easily by defining the right `baseQuery` function.

How can RTK Query work with GraphQL or custom fetch logic?

How can RTK Query work with GraphQL or custom fetch logic?

Scenario Questions

Follow-up Questions