Web

Apollo Client and Appwrite

Dec 27, 2023, 19:42

View on Discord

Votes

Replies

Participants

Unknown

Messages

GuilleOriginal post

Sep 8, 2023, 19:10

Yeah I thought the same thing at the beginning

Summary

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.

loup

Rank 3: Container

Sep 10, 2023, 21:20

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

loup

Rank 3: Container

Sep 11, 2023, 13:10

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

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 :

{
        "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
                    }
                ]
            }
        ]
    }

loup

Rank 3: Container

Sep 11, 2023, 13:40

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

loup

Rank 3: Container

Sep 11, 2023, 14:33

Ive try this :

loup

Rank 3: Container

Sep 11, 2023, 14:33

but i have a inifnite pending state on my request

Guille

Sep 11, 2023, 15:06

Can you show us the request from the network tab?

loup

Rank 3: Container

Sep 11, 2023, 15:15

Guille

Sep 11, 2023, 15:17

are you using self hosted right?

Guille

Sep 11, 2023, 15:19

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

loup

Rank 3: Container

Sep 11, 2023, 16:01

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

loup

Rank 3: Container

Sep 11, 2023, 16:02

in this exemple $userId = 64abdd24ace0ed78ab19

loup

Rank 3: Container

Sep 11, 2023, 16:02

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

Guille

Sep 11, 2023, 16:04

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

loup

Rank 3: Container

Sep 11, 2023, 16:12

Yeah ive already try this :

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 "$".

loup

Rank 3: Container

Sep 11, 2023, 16:13

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

Guille

Sep 11, 2023, 16:23

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

Guille

Sep 11, 2023, 16:24

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

loup

Rank 3: Container

Sep 11, 2023, 17:29

Ive try but still getting these errors :

{
        "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
                    }
                ]
            }
        ]
    }

loup

Rank 3: Container

Sep 11, 2023, 17:34

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

loup

Rank 3: Container

Sep 11, 2023, 17:44

This works (without variable) :

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
      }
    }
  }
`;

loup

Rank 3: Container

Sep 11, 2023, 17:46

Apollo Client and Appwrite

Guille

Sep 11, 2023, 18:02

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

loup

Rank 3: Container

Sep 11, 2023, 21:20

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 :

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})`]
    }
  })

loup

Rank 3: Container

Sep 12, 2023, 08:58

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)

Apollo Client and Appwrite

Need support?_