useParams 用于阿波罗 GraphQL 查询

Question

I have an issue with my code with react and Apollo Client, i cant get the id in my URL (useParam) and put in my query for apollo i tried lot of possibilities but i cant find the right one.

If you have the right one it will be perfect;)

i think the react router part is ok but the problem is to pass the id in my query with apollo, i'am a new graphql user... cool but not easy to understand directkly the concept

const GET_MEETING_ACCESS = gql`
query {
    meeting (id:$id){
      protectedAccess
      
    }
  }
`;


export default function MeetingAccessPage() {
    let { id } = useParams();
    const { loading, error, data } = useQuery(GET_MEETING_ACCESS, {
        variables: { id:id },
          });

    if (loading) return 'Loading...';
    if (error) return `Error! ${error.message}`;
    return (
        <div className='flex flex-col items-center h-screen w-screen bg-gradient-to-r from-blue-600 to-purple-500 bg-gradient-to-r'>
            <div className='flex text-center h-auto p-6 flex-col h-1/3'>
                <img src={logo} alt="logo" className='flex object-fill' />
                <p className='text-white text-xl font-bold pt-6'>{data.Name}</p>
                

and here my router React

<ApolloProvider client={client}>
      <Router>
        <Switch>
          <Route path="/meeting/:id">
            <MeetingAccessPage />
          </Route>
        </Switch>
      </Router>
    </ApolloProvider>

Answer 1

You need to update your query to as below

const GET_MEETING_ACCESS = gql`
  query Meeting($id: String){
    meeting (id:$id){
      protectedAccess
      
    }
  }
`;

Read more about how to use variables with GraphQl here

Answer 2

You should declare the type of variable you use when you define the graphql query. like this...

const GET_MEETING_ACCESS = gql`    
    query my_meeting($id: String!) {
       meeting (id:$id){
         protectedAccess
       }
    }
`;

ask me if it is not clear to you.