> For the complete documentation index, see [llms.txt](https://ccapeng.gitbook.io/bookstores/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ccapeng.gitbook.io/bookstores/topic-rest-to-graphql.md).

# Migrate from REST to GraphQL

![](https://111911150-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHXcfaGOqv4pveRsMZN%2Fsync%2Fa3f4aba3798e5a8ab845271d36632b0b8e5f7cbd.png?generation=1601300186616951\&alt=media)

Only the red text parts are different.

* Repositories
  * REST : <https://github.com/ccapeng/bookstore_api>
  * GraphQL : <https://github.com/ccapeng/bookstore_graphQL>
* Backend differences
  * REST :&#x20;
    * [restframework](/bookstores/topic-rest-to-graphql.md)
    * Implementation of &#x20;

      &#x20; book.apis.py &#x20;

      &#x20; book.serializers.py
    * Middleware cors : bypass the cross site origin.
    * Handle snake-case and camel-case inconsistency.
  * GraphQL :&#x20;
    * [graphene](/bookstores/topic-rest-to-graphql.md)
    * Implementation of &#x20;

      &#x20; book.schema.py
    * Middleware cors : bypass the cross site origin and `OPTIONS` method.
* Frontend differences The difference is only the database query service.
  * REST : Use URL end point.\
    category.js

    ```javascript
      const CategoryService = {
          list: () => {
              let url = "api/category/";
              return Request.get(url);
          }
      }
    ```

    request.js

    ```javascript
      const Request = {

          get: async (url) => {

              try {
                  let result = await axios.get(
                      getFullURL(url),
                      getHeaderConfig()
                  );
                  return Promise.resolve(result.data);
              } catch (error) {
                  console.log(error);
                  return Promise.reject("get error");
              }

          }
      }
    ```
  * GraphQL : Always use `POST` method to submit `query`. category.js

    ```javascript
      const CategoryService = {
          list: async () => {
              let query = `query {
                  categoryList {
                      id
                      name
                  }
              }
              `
              let data = await Request.get(query);
              return data.data.categoryList;
          }
      }
    ```

    request.js

    ```javascript
      const Request = {

          get: async (query) => {

              try {
                  query = query.replace(/^\s+/gm, '');
                  let body = { query }
                  body = JSON.stringify(body);
                  let result = await axios.post(
                      getURL(),
                      body,
                      getHeaderConfig()
                  );
                  return Promise.resolve(result.data);
              } catch (error) {
                  console.log("error list", error);
                  return Promise.reject("get error");
              }

          }
      }
    ```