SolidJS•16mo ago

How does reactivity works in createStore?

Hi, I'm quite new to SolidJS and Reactivity and I'm not sure how I should implement things. So, I've created a context with a createStore for an Auth service. Here's my AuthContext: https://gist.github.com/alveshelio/5d04ad7f3bf303b5e823ac2ad60b2a9a Then in my index.tsx I'm wrapping the app with the context like so

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

I've then created my graphql client like so

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

With this implementation the Authorization is never set in headers and . I've tried this

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

And then ...(token() && { Authorization: Bearer ${token()} }), but this doesn't work either. I know that functions in SolidJs only run once and I though that maybe by the time I call graphqlClient my state wouldn't be be set yet but I've confirmed that right before calling graphqlClient the id_token is already set. Any help would be greatly appreciated 🙂 Thank you

Gist

AuthorizerContext

GitHub Gist: instantly share code, notes, and snippets.

2 Replies

REEEEE•16mo ago

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

Is the headerOptions() a typo? If not, you'd probably want to define headerOptions as a function so it is a derived state of the state.token.id_token

const headerOptions = () => ({
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
});

const headerOptions = () => ({
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
});

hel.io•16mo ago

Hi @._rb, Thank you for the reply, it works 🙂

Gaming

Programming

How does reactivity works in createStore?