Apollo Client and Appwrite

Yeah I thought the same thing at the beginning

TL;DR

The user is experiencing slower performance with GraphQL queries compared to API queries. They have discussed the issue with the Apollo Client team and found that the issue lies in the design of the Appwrite GraphQL system. They have provided a working query using hardcoded values instead of variables. They have also attempted to use variables in the query but encountered errors. Another user suggests moving the databaseId and collectionId to be GraphQL variables and provides an example query. The user tries the suggested query but still receives a syntax error. The syntax for the queries in Appwrite seems to be causing confusion. They also request a check of the Docker container logs for Appwrite.

Apollo Client got a functionnality called "batching" that allow to make multiple query into one but quite complicated to setup with appwrite

Okay im trying to make graphql request with Apollo Client but im not able to pass variable inside :

TypeScript

const GET_LIKE_STATE = gql`
  query GetLikeState($userId: String!, $movieId: String!) {
    like: databasesListDocuments(
      databaseId: "${String(process.env.NEXT_PUBLIC_APPWRITE_DATABASE_USERS)}",
      collectionId: "${String(process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_MOVIE_LIKED)}",
      queries: ["equal('userId', $userId)", "equal('movieId', $movieId)"]
    ) {
      documents {
        _id
      }
    }
  }
`;

const { loading: isLoading, error: isError, data: isLiked } = useQuery(GET_LIKE_STATE, {
    variables: {
      userId: "64abdd24ace0ed78ab19",
      movieId: "545611",
    }
  })

Im getting this error :

TypeScript

{
        "errors": [
            {
                "message": "Variable \"$userId\" is never used in operation \"GetLikeState\".",
                "extensions": {
                    "category": "graphql"
                },
                "locations": [
                    {
                        "line": 1,
                        "column": 20
                    }
                ]
            },
            {
                "message": "Variable \"$movieId\" is never used in operation \"GetLikeState\".",
                "extensions": {
                    "category": "graphql"
                },
                "locations": [
                    {
                        "line": 1,
                        "column": 38
                    }
                ]
            }
        ]
    }

that's so weird, im not able to pass variable inside the query

Ive try this :

but i have a inifnite pending state on my request

Can you show us the request from the network tab?

are you using self hosted right?

If so, can you check the output from docker compose logs appwrite

in the log of appwrite container (from Docker Desktop) :

in this exemple $userId = 64abdd24ace0ed78ab19

so I guess the problem is inside the queries but idk what is the format for

What if you try with: queries: "[equal (userId, "$userId"), equal(movieId, "$movieId")]"

Yeah ive already try this :

TypeScript

const GET_LIKE_STATE = gql`
  query GetLikeState($userId: String!, $movieId: String!) {
    like: databasesListDocuments(
      databaseId: "${String(process.env.NEXT_PUBLIC_APPWRITE_DATABASE_USERS)}",
      collectionId: "${String(process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_MOVIE_LIKED)}",
      queries: "[equal (userId, "$userId"), equal(movieId, "$movieId")]"
    ) {
      documents {
        _id
      }
    }
  }
`;

but i got : GraphQLError: Syntax Error: Expected Name, found "$".

This is a tricky situation ahah because Ive no idea of the syntaxe so I try different thing without success

What if you try this:

TypeScript

const getLikeState = gql`
  query GetLikeState($userId: String!, $movieId: String!, $databaseId: String!, $collectionId: String!) {
    like: databasesListDocuments(
      databaseId: $databaseId,
      collectionId: $collectionId,
      queries: "[equal (userId, $userId), equal(movieId, $movieId)]"
    ) {
      documents {
        _id
      }
    }
  }
`;

Try this I've moved the databaseId and collectionId to be a graphql var so you don't mix sintaxes, give a try and let me know if it works or do you have the same error

You have to pass $databaseId and $collectionId in your query

Ive try but still getting these errors :

TypeScript

{
        "errors": [
            {
                "message": "Variable \"$userId\" is never used in operation \"GetLikeState\".",
                "extensions": {
                    "category": "graphql"
                },
                "locations": [
                    {
                        "line": 1,
                        "column": 20
                    }
                ]
            },
            {
                "message": "Variable \"$movieId\" is never used in operation \"GetLikeState\".",
                "extensions": {
                    "category": "graphql"
                },
                "locations": [
                    {
                        "line": 1,
                        "column": 38
                    }
                ]
            }
        ]
    }

Idk why Apollo isnt able to find the userId variable inside a queries

This works (without variable) :

TypeScript

const GET_LIKE_STATE = gql`
  query GetLikeState {
    like: databasesListDocuments(
      databaseId: "${String(process.env.NEXT_PUBLIC_APPWRITE_DATABASE_USERS)}",
      collectionId: "${String(process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_MOVIE_LIKED)}",
      queries: ["equal(userId, 64abdd24ace0ed78ab19)", "equal(movieId, 545611)"]
    ) {
      documents {
        _id
      }
    }
  }
`;

Apollo Client and Appwrite

So can you note a difference between the working request and the one with error in the network tab?

Well Ive discuss with Apollo Client team and the 'problem' (is actually not a problem but just how Appwrite Graphql system design is made). If I do that its working :

TypeScript

const GET_LIKE_STATE = gql`
  query GetLikeState($queries: [String!]!) {
    like: databasesListDocuments(
      databaseId: "${String(process.env.NEXT_PUBLIC_APPWRITE_DATABASE_USERS)}",
      collectionId: "${String(process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_MOVIE_LIKED)}",
      queries: $queries
    ) {
      documents {
        _id
      }
    }
  }
`;

  const { loading: isLoading, error: isError, data: isLiked } = useQuery(GET_LIKE_STATE, {
    variables: {
      queries: [`equal(userId, ${user?.$id})`, `equal(movieId, ${movieId})`]
    }
  })

Mhh graphql seems to be slower than api queries. With Apollo Client and batching, one graphql query for getting all rating and like state for post takes around 89sec while multiple api queries take around 83sec in total (11s each one)

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more

Recommended threads

Need support?

Join our Discord

Get premium support