Modify graphql request format for KeystoneJS server

I'm using KeystoneJS for my backend stack, which includes a graphql schema that has a query like this:

type Query {
  users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
  user(where: UserWhereUniqueInput!): User
  usersCount(where: UserWhereInput! = {}): Int
  buildings(where: BuildingWhereInput! = {}, orderBy: [BuildingOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: BuildingWhereUniqueInput): [Building!]
  building(where: BuildingWhereUniqueInput!): Building
  buildingsCount(where: BuildingWhereInput! = {}): Int
  units(where: UnitWhereInput! = {}, orderBy: [UnitOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UnitWhereUniqueInput): [Unit!]
  unit(where: UnitWhereUniqueInput!): Unit
  unitsCount(where: UnitWhereInput! = {}): Int
  tags(where: TagWhereInput! = {}, orderBy: [TagOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: TagWhereUniqueInput): [Tag!]
  tag(where: TagWhereUniqueInput!): Tag
  tagsCount(where: TagWhereInput! = {}): Int
  keystone: KeystoneMeta!
  authenticatedItem: AuthenticatedItem
}

type Query {
  users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
  user(where: UserWhereUniqueInput!): User
  usersCount(where: UserWhereInput! = {}): Int
  buildings(where: BuildingWhereInput! = {}, orderBy: [BuildingOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: BuildingWhereUniqueInput): [Building!]
  building(where: BuildingWhereUniqueInput!): Building
  buildingsCount(where: BuildingWhereInput! = {}): Int
  units(where: UnitWhereInput! = {}, orderBy: [UnitOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UnitWhereUniqueInput): [Unit!]
  unit(where: UnitWhereUniqueInput!): Unit
  unitsCount(where: UnitWhereInput! = {}): Int
  tags(where: TagWhereInput! = {}, orderBy: [TagOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: TagWhereUniqueInput): [Tag!]
  tag(where: TagWhereUniqueInput!): Tag
  tagsCount(where: TagWhereInput! = {}): Int
  keystone: KeystoneMeta!
  authenticatedItem: AuthenticatedItem
}

Where the BuildingOrderByInput type is this:

input BuildingOrderByInput {
  id: OrderDirection
  companyName: OrderDirection
  companyPhone: OrderDirection
  streetAddress1: OrderDirection
  streetAddress2: OrderDirection
  city: OrderDirection
  state: OrderDirection
  poBox: OrderDirection
  postalCode: OrderDirection
  country: OrderDirection
  createdAt: OrderDirection
}

input BuildingOrderByInput {
  id: OrderDirection
  companyName: OrderDirection
  companyPhone: OrderDirection
  streetAddress1: OrderDirection
  streetAddress2: OrderDirection
  city: OrderDirection
  state: OrderDirection
  poBox: OrderDirection
  postalCode: OrderDirection
  country: OrderDirection
  createdAt: OrderDirection
}

I'm using the useDataGrid method from the Material UI integration, which uses a format for graphql queries that includes built-in query variables like sort, start, and limit to list records. Is there a way to change the variable names in the Refine app to match the query variables that my graphql server recognizes?

5 Replies

kapa.ai•5mo ago

Hi @javascrapt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To modify the GraphQL request format in your Refine app to match the query variables recognized by your KeystoneJS server, you can customize the data provider. Refine allows you to override specific functions of data providers to fit your needs. Here’s how you can customize the data provider to match your KeystoneJS server's query variables: 1. Run the swizzle command to customize the data provider:

    npm run refine swizzle

    npm run refine swizzle

2. Select the appropriate data provider from the list. Since you are using GraphQL, you might need to select the GraphQL data provider. 3. Edit the data provider to match your KeystoneJS server's query variables. For example, you can modify the getList function to use orderBy, take, and skip instead of sort, start, and limit. Here is an example of how you might customize the getList function:

import { DataProvider } from "@refinedev/core";
import { gql } from "graphql-request";

const customGraphQLDataProvider: DataProvider = {
    getList: async ({ resource, pagination, sorters, filters }) => {
        const { current, pageSize } = pagination ?? {};
        const orderBy = sorters?.map((sort) => ({
            [sort.field]: sort.order.toUpperCase(),
        }));
        const where = filters?.reduce((acc, filter) => {
            acc[filter.field] = { [filter.operator]: filter.value };
            return acc;
        }, {});

        const query = gql`
            query ($where: ${resource}WhereInput, $orderBy: [${resource}OrderByInput!], $take: Int, $skip: Int) {
                ${resource}(where: $where, orderBy: $orderBy, take: $take, skip: $skip) {
                    id
                    // Add other fields you need here
                }
                ${resource}Count(where: $where)
            }
        `;
const variables = {
            where,
            orderBy,
            take: pageSize,
            skip: (current - 1) * pageSize,
        };

        const response = await client.request(query, variables);

        return {
            data: response[resource],
            total: response[`${resource}Count`],
        };
    },
    // Implement other methods (getOne, create, update, delete) similarly
};

export default customGraphQLDataProvider;

import { DataProvider } from "@refinedev/core";
import { gql } from "graphql-request";

const customGraphQLDataProvider: DataProvider = {
    getList: async ({ resource, pagination, sorters, filters }) => {
        const { current, pageSize } = pagination ?? {};
        const orderBy = sorters?.map((sort) => ({
            [sort.field]: sort.order.toUpperCase(),
        }));
        const where = filters?.reduce((acc, filter) => {
            acc[filter.field] = { [filter.operator]: filter.value };
            return acc;
        }, {});

        const query = gql`
            query ($where: ${resource}WhereInput, $orderBy: [${resource}OrderByInput!], $take: Int, $skip: Int) {
                ${resource}(where: $where, orderBy: $orderBy, take: $take, skip: $skip) {
                    id
                    // Add other fields you need here
                }
                ${resource}Count(where: $where)
            }
        `;
const variables = {
            where,
            orderBy,
            take: pageSize,
            skip: (current - 1) * pageSize,
        };

        const response = await client.request(query, variables);

        return {
            data: response[resource],
            total: response[`${resource}Count`],
        };
    },
    // Implement other methods (getOne, create, update, delete) similarly
};

export default customGraphQLDataProvider;

4. Pass the customized data provider to the Refine component in your application:

import { Refine } from "@refinedev/core";
import customGraphQLDataProvider from "./custom-graphql-data-provider";

const App = () => {
    return (
        <Refine
            dataProvider={customGraphQLDataProvider}
            // other props
        />
    );
};

export default App;

import { Refine } from "@refinedev/core";
import customGraphQLDataProvider from "./custom-graphql-data-provider";

const App = () => {
    return (
        <Refine
            dataProvider={customGraphQLDataProvider}
            // other props
        />
    );
};

export default App;

By following these steps, you can ensure that the GraphQL queries sent from your Refine app match the expected format of your KeystoneJS server. For more detailed information on customizing data providers, you can refer to the Refine documentation on customizing data providers (https://refine.dev/docs/data/packages/simple-rest/#customizing-the-data-provider-). If you need further assistance, you can also check the FAQ on customizing existing data providers (https://refine.dev/docs/data/data-provider/#how-can-i-customize-existing-data-providers). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@267106049385824266> kapa.ai is still learning and improving, please let us know how it did by reacting below

frail-apricotOP•5mo ago

Using the swizzle command to customize the data provider helped me. I had to modify the exported objects but I was able to get my Refine app's auto-generated graphql requests to work with my KeystoneJS graphql API. @kapa.ai Another related problem I'm facing is modifying the filters for graphql requests that are generated by Refine. I'm using the useDataGrid hook from the Material UI Integration. The filters are of type CrudFilter[], which uses operators like eq for "equals". My graphql API doesn't support this type and instead uses types that are specific to the resource being queried, for example, a query on a Building resource accepts a where query variable of type BuildingWhereInput. This BuildingWhereInput type includes an input field of streetAddress1 of type StringFilter which includes operators like equals instead of eq. Is there a clear way to change the supported filter operators that Refine uses for graphql requests?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To modify the filters for GraphQL requests generated by Refine to match the specific types and operators used by your KeystoneJS server, you can customize the data provider to transform the CrudFilter[] into the appropriate format expected by your GraphQL API. Here’s how you can achieve this: 1. Customize the data provider to transform the filters. You need to map the CrudFilter[] used by Refine to the specific filter types and operators used by your KeystoneJS server. 2. Transform the filters in the getList function (or any other function that requires filtering) to match the expected format. Here is an example of how you might customize the getList function to transform the filters:

import { DataProvider } from "@refinedev/core";
import { gql } from "graphql-request";

const transformFilters = (filters: CrudFilter[]) => {
    return filters.reduce((acc, filter) => {
        const { field, operator, value } = filter;
        let transformedOperator;

        // Map Refine operators to KeystoneJS operators
        switch (operator) {
            case "eq":
                transformedOperator = "equals";
                break;
            case "ne":
                transformedOperator = "not";
                break;
            case "contains":
                transformedOperator = "contains";
                break;
            case "ncontains":
                transformedOperator = "notContains";
                break;
            // Add other cases as needed
            default:
                transformedOperator = operator;
        }

        acc[field] = { [transformedOperator]: value };
        return acc;
    }, {});
};
const customGraphQLDataProvider: DataProvider = {
    getList: async ({ resource, pagination, sorters, filters }) => {
        const { current, pageSize } = pagination ?? {};
        const orderBy = sorters?.map((sort) => ({
            [sort.field]: sort.order.toUpperCase(),
        }));
        const where = transformFilters(filters);

        const query = gql`
            query ($where: ${resource}WhereInput, $orderBy: [${resource}OrderByInput!], $take: Int, $skip: Int) {
                ${resource}(where: $where, orderBy: $orderBy, take: $take, skip: $skip) {
                    id
                    // Add other fields you need here
                }
                ${resource}Count(where: $where)
            }
        `;

        const variables = {
            where,
            orderBy,
            take: pageSize,
            skip: (current - 1) * pageSize,
        };

        const response = await client.request(query, variables);

        return {
            data: response[resource],
            total: response[`${resource}Count`],
        };
    },
    // Implement other methods (getOne, create, update, delete) similarly
};

export default customGraphQLDataProvider;

import { DataProvider } from "@refinedev/core";
import { gql } from "graphql-request";

const transformFilters = (filters: CrudFilter[]) => {
    return filters.reduce((acc, filter) => {
        const { field, operator, value } = filter;
        let transformedOperator;

        // Map Refine operators to KeystoneJS operators
        switch (operator) {
            case "eq":
                transformedOperator = "equals";
                break;
            case "ne":
                transformedOperator = "not";
                break;
            case "contains":
                transformedOperator = "contains";
                break;
            case "ncontains":
                transformedOperator = "notContains";
                break;
            // Add other cases as needed
            default:
                transformedOperator = operator;
        }

        acc[field] = { [transformedOperator]: value };
        return acc;
    }, {});
};
const customGraphQLDataProvider: DataProvider = {
    getList: async ({ resource, pagination, sorters, filters }) => {
        const { current, pageSize } = pagination ?? {};
        const orderBy = sorters?.map((sort) => ({
            [sort.field]: sort.order.toUpperCase(),
        }));
        const where = transformFilters(filters);

        const query = gql`
            query ($where: ${resource}WhereInput, $orderBy: [${resource}OrderByInput!], $take: Int, $skip: Int) {
                ${resource}(where: $where, orderBy: $orderBy, take: $take, skip: $skip) {
                    id
                    // Add other fields you need here
                }
                ${resource}Count(where: $where)
            }
        `;

        const variables = {
            where,
            orderBy,
            take: pageSize,
            skip: (current - 1) * pageSize,
        };

        const response = await client.request(query, variables);

        return {
            data: response[resource],
            total: response[`${resource}Count`],
        };
    },
    // Implement other methods (getOne, create, update, delete) similarly
};

export default customGraphQLDataProvider;

3. Pass the customized data provider to the Refine component in your application:

import { Refine } from "@refinedev/core";
import customGraphQLDataProvider from "./custom-graphql-data-provider";

const App = () => {
    return (
        <Refine
            dataProvider={customGraphQLDataProvider}
            // other props
        />
    );
};

export default App;

import { Refine } from "@refinedev/core";
import customGraphQLDataProvider from "./custom-graphql-data-provider";

const App = () => {
    return (
        <Refine
            dataProvider={customGraphQLDataProvider}
            // other props
        />
    );
};

export default App;

By following these steps, you can ensure that the filters used in your GraphQL requests match the expected format of your KeystoneJS server. For more detailed information on customizing data providers, you can refer to the Refine documentation on customizing data providers (https://refine.dev/docs/data/packages/simple-rest/#customizing-the-data-provider-). If you need further assistance, you can also check ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@267106049385824266> kapa.ai is still learning and improving, please let us know how it did by reacting below