How to maintain client-side GraphQL files synched with the one in server-side?

Question

I'm new to GraphQL so please forgive any if this is a silly question.

I want to organize GraphQL files(schema and query/mutation files) in client side, which has to be aligned with the GraphQL files on server.

What is the good practice for this purpose? Is there any tool/toolchain/service, or do we have to maintain those manually(i.e. if a schema get changed on server or client, the counterpart in response update the corresponding schema)?

It would be nice if I can just use automatically-synched .graphql file which has no conflict with the ones in server.

Answer 1

A recommended approach to achieve this is by utilizing GraphQL Code Generator, a CLI tool for generating code from your GraphQL schema. If you are working with a monorepo that includes both front-end and back-end code, you can follow these steps:

• Set up GraphQL CodeGen configuration (more info)
• Set up a watch mode to automatically update backend and frontend files (more info)

You can also refer to an older question here on StackOverflow that discusses a similar issue.

Answer 2

This is my advice.Thanks!

1.you should keep your schema and query/mutation files organized in a separate directory or directories within your project. This makes it easier to manage and maintain these files, especially as your project grows and you have more queries and mutations to handle.

2.One approach to keeping your GraphQL files in sync between the client and server is to use a tool like Apollo Codegen or GraphQL Code Generator. These tools can generate typescript interfaces or classes for your queries and mutations based on your GraphQL schema, making it easier to ensure that your client-side code is in sync with your server-side schema. This approach is especially useful when you have a large number of queries and mutations, as it can save you a lot of time and effort in manually managing the files.

3.Another option is to use a version control system like Git to manage your GraphQL files. By keeping your schema and query/mutation files in version control, you can easily track changes to the files and ensure that they stay in sync between the client and server. However, this approach requires manual intervention to update the files when changes are made to the schema on the server.